Bootstrap布局混乱

Question

我知道Bootstrap首先是设计移动设备。我想知道只有Bootstrap的CSS类可能的布局是否可行？

图A大小为col-md或更大

当屏幕为col-sm或col-xs时，请转到B或C.（2种不同的解决方案）。

我正在为A-＆gt; B和A-＆gt; C寻找正确的div布局。

每个部分的高度都是随机的，因为其中生成的内容将是动态的。我在div中添加了仅用于填充的高度，但它们将是动态的，无法设置。< / p>

以下不起作用......

小提琴...... https://jsfiddle.net/s4jj30wf/

<div class="row">
    <div style="background:blue" class="col-xs-12 col-md-4">
        <div style="height:100px"></div>
    </div>
    <div style="background:yellow" class="col-md-8 col-xs-12">
        <div class="row">
            <div style="background:green" class="col-md-12 col-xs-12">
                <div style="height:20px"></div>
            </div>
            <div style="background:pink" class="col-md-12 col-xs-12">
                <div style="height:100px"></div>
            </div>
            <div style="background:red" class="col-md-12 col-xs-12">
                <div style="height:100px"></div>
            </div>
        </div>
    </div>
    <div style="background:orange" class="col-md-4 col-md-pull-4 col-xs-12">
        <div style="height:50px"></div>
    </div>
</div>

Answer 1

我认为您可能正在寻找column ordering，.push-md-和.pull-md-

Answer 2

解决方案：根据列是否具有静态高度或动态高度，有两种方法。如果它们具有静态高度，那么我们有一个纯粹的css解决方案，使用float和clear属性以及margin-top属性来实现这一点。

具有固定高度列的纯css示例：

http://codepen.io/Nasir_T/pen/ZBOgoe

如果高度不固定且动态，那么我们将需要使用jquery来调整margin-top属性，以便基于A-> B和A动态地消除未对齐的2个元素之间的间隙 - ＆gt; C场景。我们将使用默认的jquery和modernizr js来实现这个简单的解决方案。

示例jQuery＆amp;具有动态列高的css解决方案：

http://codepen.io/Nasir_T/pen/VmjoPd

希望这有帮助。

Answer 3

在文档中有一些元素流，你可以随意混合它们，除非你绝对定位它们。

仅使用引导类，我认为如何做到这一点的唯一方法是复制内容 - 您将在页面中拥有所有A，B和C，并根据屏幕大小显示您想要的内容 - 使用类{{ 1}}，visible-xs等 但复制内容通常不是明智之举。