引導程序布局混亂

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等。但是復制內容通常不是明智的主意。