在bootstrap中使用嵌套列給出意想不到的結果

我想使用嵌套列。這是我的HTML：在bootstrap中使用嵌套列給出意想不到的結果

<div class="container"> 
    <div class="row" style="color: #FFFFFF"> 
     <div class="col-xs-1"> 
      1</div> 
     <div class="col-xs-10"> 
      <div class="row" style="color: #FFFFFF"> 
       <div class="col-xs-4" style="background-color: #0099FF"> 
        2</div> 
       <div class="col-xs-4" style="background-color: #33CC33"> 
        3</div> 
       <div class="col-xs-4" style="background-color: #CC33FF"> 
        4</div> 
      </div> 
     </div> 
     <div class="col-xs-1"> 
      5</div> 
    </div> 
</div>

這是輸出：

enter image description here

爲什麼 '5' 出現在下一行？

來源

2014-10-08 Andrew Simpson

嗨夥計。感謝您的迴應。出於某種原因，我粘貼了錯誤的標記。我剛剛更新了它。正如你所看到的，我正在服從'12'這個列呢？ – 2014-10-08 10:39:58

我想你想的.row對嵌套的cols負利潤率才能正常工作外col-xs-10 ..

<div class="container"> 
     <div class="row" style="color: #FFFFFF"> 
      <div class="col-xs-1"> 
       1</div> 
      <div class="col-xs-10"> 
       <div class="row" style="color: #FFFFFF"> 

         <div class="col-xs-4" style="background-color: #0099FF"> 
          2</div> 
         <div class="col-xs-4" style="background-color: #33CC33"> 
          3</div> 
         <div class="col-xs-4" style="background-color: #CC33FF"> 
          4</div> 

       </div> 
      </div> 
      <div class="col-xs-1"> 
       5</div> 
     </div> 
</div>

演示：http://www.bootply.com/nyv0SEi3B4

來源

2014-10-08 10:33:29 ZimSystem

嗨，我試過這個，當我調整窗口大小的屏幕大小，我發佈它仍然給我說明我的問題的結果？ – 2014-10-08 10:43:39

總是會在小於360像素的寬度上進行包裝/堆疊..參見http://stackoverflow.com/questions/18365908/bootstrap-3-column-wraps-in-portrait-view-only – ZimSystem 2014-10-08 12:02:48

信息 - 謝謝 – 2014-10-08 12:05:22

的問題是在引導一行只能有12 coloumns，但你的coloumn 5已經超過了它

嘗試減少coloumns尺寸2,3和4對col-XS-3和嘗試。

來源

2014-10-08 10:31:48

在bootstrap中使用嵌套列給出意想不到的結果

回答

相關問題