css - 嵌套的 Bootstrap 3 行是否需要在 col-sm-* 中？

Question

嵌套的 Bootstrap 3 行是否需要在 col-sm-* 中，或者它们是否也可以嵌套在 col-md-、col-xs- 等中？

文档说 col-sm-* 但它似乎没有明确说明是否禁止嵌套在其他 col 大小中。

http://getbootstrap.com/css/#grid-nesting

Answer 1

您所指的 col-sm-* 只是一个示例。它实际上应该是 col-*-* (xs, sm, md, lg)。

再往下看，使用 .col-md-push-* 和 .col-md-pull-* 描述推和拉。再次说明，这只是一个例子，任何列都可以被推拉。

此外，嵌套行不一定需要直接位于父列中。需要记住的重要一点是，每一行后面紧跟着一列，但嵌套的行可以用任何元素包裹。

例子:

<div class="row">
    <div class="col-xs-12">OK</div>
</div>

<div class="row">
    <div class="foo">
        <div class="col-xs-12">NOT OK</div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="row">
            <div class="col-xs-6">OK</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="foo">
            <div class="row">
                <div class="col-xs-6">OK</div>
            </div>
        </div>
    </div>
</div>