如何将类添加到默认引导类答案

【问题标题】：How do I add a class to a default bootstrap class如何将类添加到默认引导类
【发布时间】：2016-04-15 22:47:39
【问题描述】：

我想给面板标题类一个标识符，这样我就可以在我的 CSS 中定位它而不更改任何其他面板标题，我该怎么做？

<div class="panel panel-default">
    <div class="panel-heading"><h2 class="login">Welcome Back!</h2>
    </div>`

【问题讨论】：

如果您打算多次使用它，您可以在 panel-heading 之后挤入另一个类，例如
我如何在我的 CSS 中写下它？

标签： html css twitter-bootstrap class

【解决方案1】：

HTML

<div class="panel panel-default Add-custome-class">
    <div class="panel-heading">
       <h2 class="login">Welcome Back!</h2>
    </div>
</div>`

CSS

.Add-custome-class
{
// CSS Properties 
}

【讨论】：

欢迎来到 Stack Overflow！请不要只用源代码回答。尝试对您的解决方案如何工作提供一个很好的描述。见：How do I write a good answer?。谢谢

【解决方案2】：

只需添加你的类，Bootstrap 只是一组准备使用的 css 类，可以与其他类一起使用，也可以被覆盖

<div id="my_css_id" class="panel panel-default my_css_class_1">
    <div class="panel-heading my_css_class_1">
      <h2 class="login">Welcome Back!</h2>
   </div>
</div>

【讨论】：

【解决方案3】：

您可以通过简单地在class 属性中添加第二个类来添加第二个类，这些类必须用空格分隔。

在你的情况下，它将是：

<div class="panel panel-default custom_class"> <!-- Note the new class -->
    <div class="panel-heading"><h2 class="login">Welcome Back!</h2>
</div>

然后你可以在你的 CSS 中做：

.custom_class {
    /* Your styles */
}

希望这会有所帮助！

【讨论】：

【解决方案4】：

有几种方法可以做到这一点：

将另一个类添加到您所指的特定 panel-heading：
```
<div class="panel-heading classname">
```

然后通过 CSS 使用 .panel-heading.classname { } 定位它

使用子选择器仅定位您需要的面板标题：

.panel:first-child > .panel-heading { }
.panel:last-child > .panel-heading { }
.panel:nth-child(2) > .panel-heading { }

从上面的第 2 点可以看出，我在父类 .panel 上使用子选择器，然后仅选择该父类的 .panel-heading。

请注意，上面第 n 个子选择器中的 (2) 可以更改为选择您需要的任何内容（在我给出的示例中，它显然会针对第二个选择器）。

【讨论】：