为什么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>