Bootstrap 3 中的默认网格系统

Question

<div class="col-lg-1">hi</div>
<div class="col-lg-10">hi</div>
<div class="col-lg-1">hi</div>

v/s

<div class="col-xs-1">hi</div>
<div class="col-xs-10">hi</div>
<div class="col-xs-1">hi</div>

如果您使用 .col-lg- 在应用程序中定义网格系统，我会看到。对于较小的屏幕尺寸，该应用程序不支持。如此之多，即使您通过 ctrl + 放大浏览器，宽度也会变为每个 .col-lg- div 的 100%。

相反，如果您使用 .col-xs- 在大屏幕尺寸上的行为也符合预期（很棒）。 （据我所知）。为 Web 应用程序使用 .col-xs- 或 .col-md- 网格系统有什么缺点吗？ （即使它也适用于大屏幕尺寸）

unexpected behavior 和 expected behavior 只是因为 fiddle 的屏幕尺寸小于 .col-lg 可以处理的。所以它使每个 div 100% 宽度

Answer 1

大网格（带有 .col-lg）仅在屏幕尺寸 >=1200 时变为水平网格。额外的小网格（带有 .col-xs）始终保持水平（并且从不堆叠）。

如果你按 ctrl + 放大浏览器，宽度变成每个的 100% .col-lg- div.

真正的原因是 ctrl + 不会改变屏幕大小。

使用 .col-xs- 或 .col-md- 网格系统有什么缺点吗？ 网络应用？

没有。 col-xs 对于所有屏幕尺寸都是相同的。事实上，仅使用 col-xs 会使您的应用程序无响应。 （当您使用导航栏时，您还会将 @grid-break-point 设置为 0）。

在您的情况下，中等网格 .col-md 将具有相同的“意外行为”（您无法预料），但屏幕尺寸 >= 992 像素。