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：網格系統浮動

回答

相關問題