我如何为 sm 和 xs 尺寸的显示器设置此 bootstrap 网格？

Question

我有一个 md+ 显示的网格布局，看起来像（它们都在一行中 div）：

A(col-md-8) | B(col-md-4)
C(col-md-8) | D(col-md-4)

对于小型和超小型显示器，我想要：

B(col-sm-6) | D(col-sm-6)
A(col-sm-12)
C(col-sm-12)

是否可以用 bootstrap 网格系统做这样的事情？

Answer 1

网格类

Bootstrap 网格系统有四个 classes:

xs（手机）
sm（适用于平板电脑）
md（适用于笔记本电脑）
lg（适用于台式机）

可以组合上面的 classes 来创建更加动态和灵活的布局。

提示：每个class都会放大，所以如果你想为xs和sm设置相同的宽度，你只需要指定xs.

网格系统规则

一些Bootstrap网格系统规则：

行必须放在 .container (fixed-width) 或 .container-fluid (full-width) 内，以便正确对齐和填充使用行创建水平列组内容应该放在列中，只有列可以是行的直接子元素预定义的 class 像 .row 和 .col-sm-4 可用于快速制作网格布局列通过填充创建间距（列内容之间的间隙）。该填充通过 .rows 上的负边距在第一列和最后一列的行中偏移通过指定您希望跨越的 12 个可用列的数量来创建网格列。例如，三个相等的列将使用三个 .col-sm-4.

例子

(Source)

Answer 2

您可以使用一些冗余代码来完成。

<div class="row"">
    <div class="hidden-xs hidden-sm col-md-8">COL A (MD and LG only)</div>
    <div class="col-xs-6 col-md-4">COL B</div>
    <div class="hidden-md hidden-lg col-xs-12">COL A (XS and SM only)</div>
    <div class="col-xs-12 col-md-8">COL C</div>
    <div class="col-cs-6 col-md-4">COL D</div>
</div>

您可以按照您想要的方式订购 B/D，没有任何棘手的问题，但这会让您：

A
B D
C

为了在 XS/SM 设备上将 A 显示在您喜欢的位置，您需要将该列显示两次，并将其标记为隐藏特定尺寸。另请注意，我仅对列宽使用 -XS 和 -MD。当没有指定单独的 SM 时，XS 涵盖 SM，就像 MD 涵盖 LG 一样。但是，需要为每个尺寸指定响应实用程序 hidden-xx 和 visible-xx。

希望对您有所帮助。我知道这不是最佳选择。

Answer 3

您可以像这样将嵌套与 push pull 一起使用..

<div class="container">
    <div class="row">  
        <div class="col-md-4 col-md-push-8 col-xs-12">
          <div class="row">
            <div class="col-xs-6 col-md-12"> B </div>
            <div class="col-xs-6 col-md-12"> D </div>
          </div>
        </div>
        <div class="col-md-8 col-md-pull-4 col-xs-12">
           <div class="row">
            <div class="col-xs-12"> A </div> 
            <div class="col-xs-12"> C </div>
           </div>
        </div>  
    </div>
</div>

演示：http://bootply.com/BS5Vuz0XEt

我如何为 sm 和 xs 尺寸的显示器设置此 bootstrap 网格？

How can I set this bootstrap grid for sm and xs size displays?

css

twitter-bootstrap

twitter-bootstrap-3

网格类

网格系统规则

例子