嵌套的 Bootstrap 3 行是否需要在 col-sm-* 内？答案

【问题标题】：Do nested Bootstrap 3 rows need to be within a col-sm-*?嵌套的 Bootstrap 3 行是否需要在 col-sm-* 内？
【发布时间】：2016-04-21 22:00:47
【问题描述】：

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

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

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

【问题讨论】：

那里的文档不是很清楚，但是嵌套行可以在任何 col-xx-xx 中。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

【解决方案2】：

您可以同时使用所有课程。在此基础引导程序上决定哪一个最适合屏幕。

您可以在所有类型中嵌套类 - 这取决于您的需要。

【讨论】：

【解决方案3】：

在 TWBS3 中，.col-xx-x 类仅根据百分比设置宽度，例如.col-sm-4 { width: 25% }、.col-md-4 { width: 25% } 和 .col-md-4 { width: 25% }。

是的，都一样，所以你只需要定义一个。

但是为什么会有所有的变种呢？两个原因：

这是因为您可能希望列以不同的分辨率呈现不同的宽度，例如.col-sm-4 .col-md-3 将在小屏幕上呈现 1/4 宽度，但在中、大和超大屏幕中呈现 1/3。
一旦屏幕分辨率低于所选宽度，该列将呈现为“移动优先”变体。即.col-sm-4 将在小、中、lg、xl 屏幕上呈现 ¼ 宽度，但在 xs 屏幕上呈现全宽。同样，在 md、lg 和 xl 屏幕中仅使用 .col-md-4 渲染 1/4，但在 sm 和 xs 屏幕中使用全宽。因此，.col-sm-4 .col-md-4 这样的类集是多余的。

因此，有了这些知识 - 并直接回答您的问题：不，您只需要一个声明，但请注意您选择的大小，因为当小于您的选择时，列将呈现全宽 ( width: 100%)

【讨论】：