Bootstrap 3：col-xs-12 是可选的吗？答案

【问题标题】：Bootstrap 3: is col-xs-12 optional?Bootstrap 3：col-xs-12 是可选的吗？
【发布时间】：2015-04-19 22:13:24
【问题描述】：

我们有

<div class="col-md-6">left</div>
<div class="col-md-6">right</div>

对于比md 更小的屏幕，我们希望将其分成两行。看起来它按预期显示。完美。

同样的结果是当我们添加col-xs-12所以它是

<div class="col-xs-12 col-md-6">left</div>
<div class="col-xs-12 col-md-6">right</div>

大屏一条线，小屏两条线。

问题是：

因此，col-xs-12 类在这种情况下是可选的还是推荐的？

【问题讨论】：

你可以看看这个topic。解释网格的工作原理。
@iamemmanouil 谢谢。我知道我不应该输入 col-lg-6 和 col-sm-12。这很清楚。问题仅在上述情况下是关于 col-xs-12 的。应该取消还是推荐？看起来两种情况下的结果都是一样的。
技术上你不需要它，除非需要，否则我不会使用任何响应式框架的小类。完成同一件事不需要额外的打字和类。如果不是 12（全角），我只会在这种情况下添加 col-xs-。更进一步，它从小到大工作。因此，如果您需要 large & small 各为 6 列，您可以只做一类 col-xs-6 ，除非另有说明，否则它会转移到它上面的所有内容。

标签： css html twitter-bootstrap

【解决方案1】：

我之前认为添加col-xs-12 可能是个好主意，因此默认填充将应用于元素。但是如果你仔细看一下 bootstrap 的 css，你会注意到 padding 是在其他地方定义的

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

因此，无论当前应用的@media 屏幕大小如何，填充都会自动应用于至少具有一个col-*-* 类的所有元素。

回答您的问题：是的，col-xs-12（以及其他col-*-12）是可选的，您不必使用它只要您至少有一个 col-*-* 类应用于元素。

【讨论】：

我知道这已经有一段时间了，但今天我悲伤地意识到col-xs-12（可能还有其他col-*-12）并不是我认为的真正可选的。见我的answer below。现在回到添加缺少的 col-xs-12 的...
实际上，只要您至少有一个其他 col-*-* 规则，填充就可以了。请记住，如果您想在某些设备上进行断行行为（（例如col-xs-6、col-xs-6、col-xs-12; 以便最后一个元素中断到下一行），这将不起作用，因为缺少width:100%。通过将自定义规则应用于所需元素，您可以轻松解决该问题。现在的问题是，在元素上使用显式col-xs-12 是否更好。可能我更喜欢将其保留在这样的案例。

【解决方案2】：

TL;DR：虽然是可选的，但您可能仍然需要col-xs-12

至少在 Bootstrap 3.4.1 中，省略它会导致较小的屏幕尺寸出现问题。没有col-xs-12 的元素也不会有对应的float: left; width: 100%; 样式。这将导致它们长得更高，遮挡上方的元素，并阻止它们获得焦点。

我将this pen 放在一起以显示实际存在的问题。