通过示例引导列类 [重复]

Posted 2023-03-06

【中文标题】通过示例引导列类 [重复]

【英文标题】：Bootstrap Column Classes by Example [duplicate]

【发布时间】：2018-08-13 00:25:30

【问题描述】：

Bootstrap docs over at W3 Schools（在其他方面完美无缺且令人惊叹！）没有很好地解释何时使用各种列类。他们只是用以下方式描述这些类：

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

但是他们从来没有明确（至少对我来说）我应该在什么时候使用 sm 和 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 vs sm vs md vs lg 有什么区别？！？！提前致谢！

【问题讨论】：

如果你声明一个类，例如"lg" 仅当您的屏幕尺寸超过 992 像素时才会应用。

我会坚持使用official Bootstrap docs。 W3 学校的文档在网格解释中是错误的和误导性的。并且，col-*don't need to add up to exactly 12 在每个 .row

【参考方案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 列。

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

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

通过这种方式，您可以使用一行代码，并为所有设备声明正确的尺寸。

【讨论】：

谢谢！！！ 终于，有人能够用一个合理的例子来解释这一点，非常感谢，非常有道理！当 SO 允许我在几分钟内给你绿色支票时，这一切都是你的！

【参考方案2】：

目的是在不同的设备上允许不同的布局。例如，如果您想让移动设备上的列全宽 (12)，但在桌面设备上只占屏幕的第三 (4)。

据我所知，它们不需要加起来为 12，12 只是被认为是一行。

见https://getbootstrap.com/docs/4.0/layout/grid/

【参考方案3】：

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

.col- = 超小 .col-sm- = 小 >=576px .col-md- = 中等 >=768 像素 .col-lg- = 大 >=992px .col-xl- = 超大 >=1200 像素

【参考方案4】：

我们先从xs,md,lg..之后的数字开始吧。

在引导程序中，这些数字代表列。所有的 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 和平板电脑屏幕大小的 1/3 (sm)>=576px