1

对于有引导经验的人，我可能有一个简单的问题。在此页面上：http: //limitedwave.com/watsonmetals/site/，在导航栏下方的第一部分中，我有 4 个“区域”。一个是一个标志，在它的正下方是一个盒子里的一些文本，在一个大的导航网格的右边，在这个网格下面只有一个“额外的行”。

我没有在引导网格上正确地布置它，我想这样做。我在 div 中的内容或多或少地堆叠和浮动，并带有 css 和大量的边距操作，以使其看起来像它一样。假设引导程序可以通过其网格将这些 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

0

http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

Bootstrap 的文档非常可靠。该标准container->row->span#应该适用于该网格。它还应该解决您在使用较小屏幕时遇到的 responsiveUi 问题。

于 2013-07-03T00:42:29.647 回答