Question

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

我没有在引导网格上正确地解决这个问题，我想。我有div中的内容，或多或少堆叠和浮动css和重边缘操作，使它看起来像它。我错误地假设bootstrap可以通过其网格布局这些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>

Answer 1

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

Bootstrap的文档非常可靠。标准container->row->span#应该适用于该网格。它还应该处理你在较小屏幕上遇到的响应性问题。

正确的方法来安排引导程序布局

1 个答案: