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

当我编写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

---

把所有课程都包括在内是一种好的做法吗

也许您已经看到很多教程没有演示4种引导网格大小的“级联”效果

向每个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

。这里的演示可能有助于澄清问题：

如果希望不同大小的类具有不同的外观，则只需编写多个类

此

与所有其他代码相同：

<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..

等

如果希望每个视图的长度不同，只需编写不同的类

例如

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

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

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