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

Question

鉴于以下代码没有 css 附加到 table，没有任何修改 row class:

<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>

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

Why is Bootstrap moving the last column to the next row?

html

css

markup

twitter-bootstrap

twitter-bootstrap-3