如何扩展Bootstrap类

Question

我正在学习 Bootstrap Twitter 的初级使用，并且需要扩展组件。例如，我想要更改导航栏的背景，但是不想更改原始的 CSS 文件。

我尝试创建一个带有新背景的新类 .test：

.test{
    background-color: red !important;
}

我已在HTML中调用它：

 <div class="navbar navbar-fixed-top test">

但是，它不起作用。 如何做到这一点？

- ramiromd

---

我的回答有效吗？我看到你又问了一个关于Bootstrap CSS覆盖的问题：https://dev59.com/b3PYa4cB1Zd3GeqPn9hY - Carol Skelly

你应该接受答案，这样其他人就知道问题已经解决了。 - Carol Skelly

Answer 1

这里有几种自定义/扩展Bootstrap类的方法，都在这里讨论了：Twitter Bootstrap Customization Best Practices

如果您打算用自己的定制CSS覆盖boostrap样式，则应避免使用 !important，因为这通常是一种不好的做法。

在 navbar 的情况下，具有背景颜色的元素是 navbar-inner，因此您需要像这样覆盖：

.test .navbar-inner{
    background-color: red;
}

自定义导航栏示例：http://bootply.com/61032

---

如何使用SASS扩展/修改（自定义）Bootstrap 4

- Zim

---

有两种方式...您是指 "有两种方式..." 还是 "可选的方式太少..."？只是确认一下，以便我正确理解您的回答。 - samjewell