Question

使用bootstrap考虑这两个略有不同的代码：

A）

<div class="row">
   <div class="col-lg-4" style="background-color:blue;">First</div>
   <div class="col-lg-8" style="background-color:red;">Second</div>
</div>

b）中

<div class="row">
   <div class="col-xs-4" style="background-color:blue;">First</div>
   <div class="col-xs-8" style="background-color:red;">Second</div>
</div>

当您拖动浏览器的一侧并减小宽度时，第二个代码的行为将与第一个代码不同。

不知何故，col-lg-* div将比col-xs-* div更快地（在更高的浏览器宽度）分成两行。

我读了Bootstrap提供的CSS文件，我的第一个想法是col-lg-*类具有更高的最小宽度属性。然而，遗憾的是，除了相同的宽度，边距和填充值之外，我找不到任何东西。

Answer 1

@Media 用于移动开发。

Min-Width也不仅仅适用于移动开发，正如您所说;它是一种约束，可以在调整浏览器页面大小时阻止段自身折叠 - 用于跨屏幕分辨率的一致性。

如果你看两个div类，col-lg col-xs

xs (phones), sm (tablets), md (desktops), and lg (larger desktops)

所以，很自然地 - 较大的div将在较小的div之前重新调整大小。这些值肯定在其中一个引导程序文件中，您只需要继续查看 - 或者 - 如果您使用的是预先制作的模板，它们可能位于自定义CSS文件中，这会超越默认的Bootstrap的CSS

Answer 2

这是因为框架是首先构建的。由于您没有使用第一位代码指定较小的断点，因此假定它们为12列。

例如，这两行代码是相同的：

<div class="col-lg-4"></div>

与：

相同

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4"></div>

这就是为什么div很快崩溃了。这是因为他们正在击中下一个最小的断点。

为什么较大的断点会在较小的断点之前崩溃？

2 个答案: