爲什麼Bootstrap將最後一列移動到下一行？

Question

鑑於不帶任何附加表CSS下面的代碼，什麼都沒有修改row類：

<div class="row"> 
    <div class="itemGrid"> 
     <div class="col-xs-1"></div> 
     <div class="col"> 
      <table> 
       ... 4 TD columns, 4 tr rows, no content of fixed widths 
      </table> 
     </div> 
     <div class="col-xs-1"></div> 
    </div> 
</div> 

樣式.itemGrid：

.itemGrid{ 
    text-align: center; 
} 

第三列（<div class="col-xs-1"></div>）被推到下一行，就好像我指定了太多的列，而不管視口寬度如何。爲什麼是這樣？

Answer 1

這是因爲您的第二列.col未指定。嘗試例如爲：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="itemGrid"> 
 
    <div class="col-xs-1">test</div> 
 
    <div class="col-xs-10"> 
 
     <table> 
 
     ... 4 TD columns, 4 tr rows, no content of fixed widths 
 
     </table> 
 
    </div> 
 
    <div class="col-xs-1">test</div> 
 
    </div> 
 
</div>