css - 在 bootstrap 中混合不同类型的列

Question

我可以在布局中混合使用不同的列(col-xs-、col-sm- 等)吗？

例如，我有:

<div class="col-xs-12">
   ...
</div>
<div class="col-xs-12">
   ...
</div>
<div class="col-xs-6">
   ...
</div>
<div class="col-xs-6">
   ...
</div>

还有更多 col-xs 列。

但现在例如，我想在平板电脑和显示器中将第一列从全宽更改为半宽，因此我添加了“col-sm-6 col-sm-offset-3”并删除了“col-xs-12”因为“col-sm-6”意味着“col-xs-12”:

<div class="col-sm-6 col-sm-offset-3">
   ...
</div>
<div class="col-xs-12">
   ...
</div>
<div class="col-xs-6">
   ...
</div>
<div class="col-xs-6">
   ...
</div>

它有效，但这对于 Bootstrap 网格系统和标准来说是正确的吗？

或者也许我必须给其他人加上“col-sm-*”？ :

<div class="col-sm-6 col-sm-offset-3">
   ...
</div>
<div class="col-xs-12 col-sm-12">
   ...
</div>
<div class="col-xs-6 col-sm-6">
   ...
</div>
<div class="col-xs-6 col-sm-6">
   ...
</div>

或者也许我必须保留“col-xs-12”？

<div class="col-xs-12 col-sm-6 col-sm-offset-3">
   ...
</div>
<div class="col-xs-12">
   ...
</div>
<div class="col-xs-6">
   ...
</div>
<div class="col-xs-6">
   ...
</div>

或者我可能必须保留“col-xs-12”并向其他人添加“col-sm-*”以便在所有 div 中具有相同的类型？

<div class="col-xs-12 col-sm-6 col-sm-offset-3">
   ...
</div>
<div class="col-xs-12 col-sm-12">
   ...
</div>
<div class="col-xs-6 col-sm-6">
   ...
</div>
<div class="col-xs-6 col-sm-6">
   ...
</div>

哪个版本是正确的？如何正确混合不同类型的色谱柱？

Answer 1

较大的尺寸覆盖较小的尺寸(例如 col-sm 将覆盖 col-xs 除非屏幕小于 col-sm)。就我个人而言，我总是添加一个 col-xs 并且只在需要时才添加更大的尺寸。

例子:

<!-- full width on phones and half on anything bigger -->
<div class="col-xs-12 col-sm-6">
  ...
</div>