1

ブートストラップの経験がある人には、おそらく簡単な質問があります。このページ: http://limitedwave.com/watsonmetals/site/、ナビゲーション バーのすぐ下の最初のセクションに、4 つの「ゾーン」があります。1 つはロゴ、そのすぐ下のボックス内のテキスト、両方の大きなナビゲーション グリッドの右側、およびその下のグリッドのみの下の「余分な行」です。

私はこれをブートストラップ グリッドに適切に配置していません。私は多かれ少なかれスタックされ、cssと重いマージン操作でフローティングされたdivのコンテンツを持っています。ブートストラップがこれらの div をグリッドを介してテーブルのようにレイアウトできると仮定するのは間違っていますか? おそらくこれは、ブラウザのサイズを全幅の Mac Pro サイズから次に小さいサイズに変更するとすぐに、ロゴとテキストが右に移動するという事実にも役立つかもしれません。

   <section id="intro" data-speed="2" data-type="background">
   <div class="container">
        <div class="row-fluid"> 

    <div id="welcome-screen" class="span16 text-left">
    <div id="lrail">      
    <div id="logocontainer">       
    <img id="logo" src="img/logo-watson.png" alt="Watson Metals, LLC." width="130" />
    </div>

    <div id="welcome-box" class="span3 text-right">
    Watson Metals manufactures quality metal building panels, for roof, siding, accessories for all building applications. We offer a pole barn package, steel siding or metal roofing for your personal specifications and needs.<br><br>
    With an array of metal panel profiles such as Tuff-Rib, R-Panel, and our standing seam profile, we can provide material for almost any application. Our standing seam profile is available in either 12” or 16” widths and can be conveniently produced on your jobsite using our portable roll-former.
    </div>
    </div>      
          <div class="span12 text-center"> 
            <div id="main-interface-container">
              <ul id="interface-list">
                <li><a class="link1" href="link1.php">Roofing Panels</a></li>
                <li><a class="link2" href="link2.php">Post Frame Buildings</a></li>
                <li><a class="link3" href="link3.php">Other Products</a></li>
                <li><a class="link4" href="link4.php">Custom Trim</a></li>
                <li><a class="link5" href="link5.php">Warranties and Information</a></li>
                <li><a class="link6" href="link6.php">Frequently Asked Questions</a></li>
                <li><a class="link7" href="link7.php">Energy Star</a></li>
                <li><a class="link8" href="link8.php">About Our Company</a></li>
                <li><a class="link9" href="link9.php">Contact Us</a></li>
              <li><img id="home-locations" src="img/watson-locations.png" alt="Locations" /></li>
              </ul>
            </div>


    </div>

            <div class="span8 text-center"><span class="copyright">Copyright &copy; 2013 Watson Metals LLC., All Rights Reserved.</span></div>
          </div>
          </p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>

        </div>
      </div>
    </section>
4

1 に答える 1