Twitter Bootstrap：网格系统浮动

我有以下简单的HTML页面。它应该水平显示Col1到Col4，但是Col4在其他的下面。为什么？我该如何解决它？Twitter Bootstrap：网格系统浮动

我使用的是引导2.2.2

<html> 
    <head> 
    <!-- Bootstrap --> 
    <link media="screen" rel="stylesheet" href="http://localhost:9000/assets/stylesheets/bootstrap.min.css"> 
    </head> 
    <body>  
    <div class="container"> 
     <div class="row"> 
     <div class="span6 row"> 
      <div class="span1">Col1</div> 
      <div class="span1">Col2</div> 
      <div class="span1">Col3</div> 
      <div class="span3">Col4</div> 
     </div> 
     <div class="span6 row"> 

     </div> 
     </div> 
    </div> 
    <script src="http://localhost:9000/assets/javascripts/bootstrap.min.js"></script> 
    </body> 
</html>

来源

2012-12-17 Heinzi

既然你想巢格元素，你需要指定.row容器作为网格元素容器的孩子，这样您的网格元素可以正确对齐。你现在的方式.row类将无法删除多余的排水沟空间它消除了负边距，以适应您的容器中的所有列。你可以阅读更多关于它的here下的嵌套列部分。

固定标记：

<html> 
    <head> 
    <!-- Bootstrap --> 
    <link media="screen" rel="stylesheet" href="http://localhost:9000/assets/stylesheets/bootstrap.min.css"> 
    </head> 
    <body>  
    <div class="container"> 
     <div class="row"> 
     <div class="span6"> 
      <div class="row"> 
       <div class="span1">Col1</div> 
       <div class="span1">Col2</div> 
       <div class="span1">Col3</div> 
       <div class="span3">Col4</div> 
      </div> 
     </div> 
     <div class="span6"> 
      <div class="row"> 
      </div> 
     </div> 
     </div> 
    </div> 
    <script src="http://localhost:9000/assets/javascripts/bootstrap.min.js"></script> 
    </body> 
</html>

来源

2012-12-17 00:58:28

Twitter Bootstrap：网格系统浮动

回答

相关问题