Bootstrap 3响应是否需要所有设备的类

Question

当我写html时，我添加了所有类，如

<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2"></div>

我看过很多教程，但从未见过有人将所有课程添加到每个div中。

包括所有课程是一种好习惯吗？

Answer 1

也许您已经看过很多教程没有展示4个Bootstrap网格尺寸的“级联”效果。

向每个div添加多个类没有任何问题，但仅需要为较小的宽度编写类。例如，sm适用于768及更高版本（表示sm及更高版本）：

使用此...

<div class="col-lg-8 col-md-8 col-sm-8"></div>

与使用..具有相同的效果。

<div class="col-sm-8"></div>

所以，如果你想只需要同时使用所有4个lg，md，sm和xs >桌面，笔记本电脑，平板电脑和手机上的不同的 列大小。这是一个可能有助于澄清的演示：http://bootply.com/73778

Answer 2

如果你想要不同尺寸的不同外观，你只需要编写多个类。

此<div class="col-sm-8"></div>等于其余所有内容：

<div class="col-md-8"></div>
<div class="col-sm-8 col-md-8"></div>
<div class="col-md-8 col-lg-8"></div>
<div class="col-md-8 col-lg-8 col-xs-8"></div>
etc..

如果每个视图需要不同的长度，则只需要编写不同的类。

例如

<div class="col-sm-3 col-md-6"></div>
<div class="col-sm-9 col-md-6"></div>

在小型设备（手机平板电脑）中，第一列的网格尺寸为3，而第二列的尺寸为9.在较大的设备上，第一列和第二列的网格尺寸均为6。

PS。请记住，在html中对所有类进行硬编码并不是最好的方法。尝试使用css预编译器来帮助您编写更少的代码！