引导程序布局混乱

Question

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

尺寸为col-md或更大的图A

当screen是col-sm或col-xs ，请转到B或C。（两种解决方案）。

我正在寻找A-> B和A-> C的正确div布局。

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

以下不起作用...

小提琴... 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

我认为您可能正在寻找的是列排序 ，可以在其中进行.push-md-和.pull-md-

Answer 2

解决方案：根据列是静态高度还是动态高度，有两种方法。 如果它们具有静态高度，则可以使用float和clear属性以及margin-top属性来实现纯CSS解决方案。

样本纯CSS具有固定的列高：

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

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

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

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

希望这可以帮助。

Answer 3

在文档中有一些元素流，除非绝对放置它们，否则不能随意混合它们。

我认为仅使用引导程序类，这样做的唯一方法是复制内容-您将在页面中拥有所有A，B和C，并根据屏幕大小显示所需的内容-使用类visible-xs ， hidden-sm等。但是复制内容通常不是明智的主意。