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

您可以像这样使用嵌套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

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

网格类

Bootstrap网格系统有四个类：

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

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

提示：每个课程都会向上扩展，因此如果您希望为xs和sm设置相同的宽度，则只需指定xs。

网格系统规则

一些Bootstrap网格系统规则：

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

实施例

（Source）

如何为sm和xs尺寸显示设置此引导网格？

3 个答案:

网格类

网格系统规则

实施例