Chrome 中的 Twitter 引导布局中断

Question

我正在尝试创建一种组合样式的布局，列的宽度不同。

我遇到的问题是布局在左侧有 5col div 和右侧 7col 的行中中断。

反之 (7col | 5col) 似乎可以正常工作。这是一种奇怪的行为。

有人知道为什么会这样吗？

要演示此错误，只需调整窗口大小即可。

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

干杯， 泰雷兹马塞多

Answer 1

这并不完全是“中断”，所发生的实际上是预期的行为。

您正在使用.col-md-*，这意味着仅在视口为“中等”as defined by TBS3 时才会形成列。否则，它们将堆叠。这就是您所观察到的，因为调整窗口大小最终会导致视口变小（或超小），并且列将堆叠显示。

网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，将任何.col-md- 类应用于元素不仅会影响其在中型设备上的样式，而且如果.col-lg- 类不存在，也会影响大型设备上的样式。

使用一组.col-md-* 网格类，您可以创建一个基本的网格系统，该系统开始堆叠在移动设备和平板设备（超小到小范围）上，然后在桌面（中型）设备上变为水平。在任何.row 中放置网格列。

如果您希望列始终显示，则需要改用.col-xs-*。