按示例引导列类

Question

Bootstrap docs over at W3 Schools（其他方面完美且令人惊叹！）在使用各种列类时解释时做得不好。他们只是用以下内容描述这些类：

• xs（适用于手机 - 屏幕宽度小于768像素）
• sm（适用于平板电脑 - 屏幕宽度等于或大于768px）
• md（适用于小型笔记本电脑 - 屏幕宽度等于或大于992px）
• lg（适用于笔记本电脑和台式机 - 屏幕宽度等于或大于1200px）

但是他们从来没有说清楚（至少对我来说）我何时应该使用sm vs xs等等。对我来说奇怪的是Bootstrap甚至提供了这些类，因为我认为整个问题是Bootstrap看起来是统一和一致的，然后只是在屏幕尺寸发生变化时自动响应......所以基于用户的设备使行为变得灵活，我认为CSS框架不会暴露给API开发人员。

无论哪种方式，这之间的区别是什么：

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

和此：

<div class="row">
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-lg-4">.col-lg-4</div>
</div>

和此：

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-lg-8">.col-lg-8</div>
</div>

？换句话说，如果所有的列宽都必须加起来为12，那么将它们声明为xs与sm与md vs lg之间的区别是什么？！？ ！提前谢谢！

Answer 1

使用Bootstrap时，可以为不同的设备使用不同的类。我们来看下面的例子：

<div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12">Column 1</div>
    <div class="col-lg-4 col-md-6 col-sm-12>Column 2</div>
    <div class="col-lg-4 col-sm-6 col-sm-12">Column 3</div>
</div>

当您使用大型设备（屏幕宽度等于或大于1200像素）时，您的屏幕将连续填充3列。

使用中型设备（屏幕宽度等于或大于992px）时，前两列将彼此相邻，宽度为50％。第3列将位于其下方，宽度为100％。

使用较小的设备（屏幕宽度等于或大于768px）访问网站时，所有列的宽度均为100％。

这样您就可以使用一行代码，并为所有设备声明正确的大小。

Answer 2

目的是允许不同设备上的不同布局。例如，如果您希望移动设备上的列为全宽（12），而只占桌面设备上的第3（4）个屏幕。

据我所知，他们 需要添加最多12个，12个就是被认为是一行。

请参阅

Answer 3

让我们先来看看xs，md，lg之后的数字。

在bootstrap中，这些数字代表列。所有div都分为12列。

col-md-6跨越12列（屏幕宽度的一半）中的6列，当它is col-md-12时，它占据了中等大小屏幕的整个屏幕宽度（ md ）。 (≥ 992px)

所以，如果你想要三个相等的列来跨越div，写（对于小屏幕）

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

如果你想要三个不相等的列跨越相同的宽度，你可以写：

<div class="col-sm-2">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-6">Column 3</div>

在这些示例中，列数始终合计为12.在上面的示例中 2 + 4 + 6 = 12

当谈到 xs，sm，md，lg 时，它们用于定义该类应该应用的屏幕大小：

xs =超小屏幕（手机）

sm =小屏幕（平板电脑）

md =中等屏幕（某些桌面）

lg =大屏幕（剩余桌面）

通常，我们为一个div分配多个类，因此它的行为符合用户的设备屏幕大小。例如

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-4</div>
  <div class="col-xs-6 col-sm-8">.col-md-4</div>
</div>

上面的行col-xs-6和col-sm-4将跨越移动屏幕的< 768px屏幕的一半和平板电脑（sm）{1/1}的屏幕尺寸的1/3

Answer 4

类之间的差异是不同的屏幕尺寸。 看看这里：https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

• .col-sm- =超小<576px
• .col-md- =小＆gt; = 576px
• .col-lg- =中＆gt; = 768px
• .col-xl- =大＆gt; = 992px
• Builders<Model>.Update.Inc("Items.$.Amount", incrementValue); =超大＆gt; = 1200px