css - 如何扩展 Bootstrap ​​类

Question

我正在使用 Bootstrap Twitter 迈出第一步，需要扩展组件。例如，我想更改导航栏背景，但不更改原始 css 文件。

我尝试用新背景创建一个新类.test:

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

我在 hmtl 中将它调用为:

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

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

Answer 1

有几种方法可以自定义/扩展 Bootstrap 类，所有这些都在这里讨论:Twitter Bootstrap Customization Best Practices

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

在 navbar 的情况下，具有背景颜色的元素是 navbar-inner 所以你想像这样覆盖:

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

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

---

How to extend/modify (customize) Bootstrap 4 with SASS