一个div可以有多个类（Twitter Bootstrap）[重复]答案

【问题标题】：Can a div have multiple classes (Twitter Bootstrap) [duplicate]一个div可以有多个类（Twitter Bootstrap）[重复]
【发布时间】：2013-01-30 19:51:15
【问题描述】：

一个div标签可以有两个类吗？

我正在使用 twitter 引导程序，并且我想使用两个预定义的类。

一个是active 类，我想在导航栏中的dropdown-toggle 上使用它。

在不覆盖 css 的情况下，在 html 中处理此问题的最佳方法是什么。

【问题讨论】：

阅读本文。 css-tricks.com/multiple-class-id-selectors

标签： html css twitter-bootstrap

【解决方案1】：

当然，一个 div 可以有任意多的类（这通常与 bootstrap 和 HTML 有关）：

<div class="active dropdown-toggle"></div>

只需用空格分隔类。

另外：请记住，一些引导类应该用于相同的东西但在不同的情况下（例如alignment classes，您可能希望左右对齐或中心，但它必须是只有一个）并且你不应该将它们一起使用，否则你会得到意想不到的结果，基本上会发生的情况是类与最高的specificity 将是应用的那个（或者如果它们具有相同的，那么它将是CSS 上最后定义的那个）。所以你最好避免做这样的事情：

<p class="text-center text-left">Some text</p>

【讨论】：

【解决方案2】：

我不确定您是否专门询问引导程序，即这两个类是否可以一起使用，或者您是否只是一般性地询问？

您可以根据需要为元素应用任意数量的类，只需用空格分隔类名

<div class="active dropdown-toggle"></div>

【讨论】：

【解决方案3】：

当然，div 可以有多个类，并且对于一些 Bootstrap 组件，您通常需要有多个类才能让它们按您希望的方式运行。当然，在引导程序之外也可以应用多个类。您所要做的就是用空格分隔每个类。

下面的例子：

<label class="checkbox inline">
   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>

【讨论】：

【解决方案4】：

用空格分隔类。

<button class="btn btn-success dropdown-toggle active" data-toggle="dropdown">Success <span class="caret"></span></button>

演示：http://jsfiddle.net/wNfcg/

【讨论】：

【解决方案5】：

是的，div 可以根据需要选择任意数量的类。使用空间将一个与另一个分开。

 <div class="active dropdown-toggle custom-class">Example of multiple classses</div>

【讨论】：

【解决方案6】：

一个 div 可以包含多个类，无论是否使用 bootstrap

<div class="active dropdown-toggle my-class">Multiple Classes</div>
要应用多个类，只需按空格分隔类即可。

看看这个链接你会发现很多例子
http://getbootstrap.com/css/
http://css-tricks.com/un-bloat-css-by-using-multiple-classes/

【讨论】：

【解决方案7】：

空格用于创建多个类：

【讨论】：

这实际上并没有比一年前已经发布的答案添加任何内容。

【解决方案8】：

您可以向一个元素添加任意数量的类，但每个元素只能添加一个 id。

<div id="unique" class="class1 class2 class3 class4"></div>

【讨论】：

【解决方案9】：

你可以有多个 css class 选择器：

例如：

<div class="col-md-4 a-class-name">
</div>

但只有一个id：

<div id = "btn1 btn">  <!-- this is wrong -->
</div>

【讨论】：