Question

我们有

<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类是可选的还是推荐的？

Answer 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;
}

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

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

Answer 2

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

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

我整理了this pen来展示实际问题。

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

2 个答案: