html - 为什么 Bootstrap 将最后一列移动到下一行？

Question

鉴于以下代码没有附加到表格，没有任何修改 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> )被推到下一行，就好像我指定了太多列，无论视口(viewport)宽度如何。这是为什么？

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>