Chrome的引導程序佈局中斷

Question

我正在嘗試創建組合樣式的樣式佈局，列的寬度不同。

我遇到的問題是佈局在左側有5cm div而右側有7col的行中斷。

當它是相反的（7col | 5col）它似乎工作正常。這是一個奇怪的行爲。

有誰知道爲什麼會發生這種情況？

要演示此錯誤，只需調整窗口大小。

http://codepen.io/anon/pen/lqsgC

乾杯， 泰雷茲馬塞

Answer 1

這不正是 「破發」，會發生什麼情況實際上是預期的行爲。

您正在使用.col-md-*這意味着列將形成僅如果視口「中」 as defined by TBS3。否則，他們會堆疊。這就是你正在觀察的，因爲調整窗口大小最終會導致一個小的（或者超小的）視口，並且這些列將顯示堆疊。

網格類適用於屏幕寬度大於或等於斷點尺寸的設備，並覆蓋面向較小設備的網格類。因此，如果.col-lg-類不存在，則將任何.col-md-類應用於元素不僅會影響其在中型設備上的樣式，還會影響其在大型設備上的樣式。

使用一組.col-md-*網格類，您可以創建一個基本網格系統，在桌面（中型）設備上變爲水平之前，該系統開始疊加在移動設備和平板電腦設備上（從小到小範圍）。將柵格列放置在任何.row中。

如果您希望列始終顯示，您需要使用.col-xs-*來代替。