【问题标题】: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% }

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

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

      1. 这是因为您可能希望列以不同的分辨率呈现不同的宽度,例如.col-sm-4 .col-md-3 将在小屏幕上呈现 1/4 宽度,但在中、大和超大屏幕中呈现 1/3。

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

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2015-08-31
        • 2019-09-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-08-11
        • 2015-07-07
        • 2015-05-18
        相关资源
        最近更新 更多