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>

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

或者我可能要向其他人添加“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>

Answer 2

这些信息都可以在Bootstrap的文档中找到。将多个col-*-*类添加到<div>元素是完全正常的：

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
...
</div>

是一个完全可行的类结构，根据视口的当前大小呈现不同的列大小。如果是xs，那么它将是一个全宽列。小是一半，中等是第三，大是第四（基于12列布局。）

如果您需要更多信息，请查看此处：

Bootstrap Grid System

Answer 3

列大小调整将默认使用最小的大小（xs），后续类将覆盖原始大小。

例如：

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

在所有浏览器上显示为100％宽度。

以下内容在移动浏览器上显示为100％，在平板电脑上显示为50％。

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

Answer 4

所有其他答案解释了什么覆盖了什么，但要回答关于你必须拥有什么的问题，默认值是100％宽度。所以如果你只指定：

<div class="col-sm-6">
  ...
</div>

然后当你小于768px时，它将从50％（6列）变为100（12列）

在bootstrap中混合使用不同类型的列

4 个答案: