引导导航栏 CSS [重复]答案

【问题标题】：Bootstrap Navbar CSS [duplicate]引导导航栏 CSS [重复]
【发布时间】：2013-07-25 20:54:29
【问题描述】：

到目前为止，我已经从网上自学了 CSS。我觉得我做得很好，但我有一段时间试图编辑导航栏。我目前正在使用 Boostrap，但我对 CSS 有疑问，尤其是导航栏功能。

我了解 HTML 如何引用 bootstrap.css，但是在尝试拥有自定义 css (style.css) 时，我无法让导航栏使用顶级类更改颜色。例如改变 navbar 或 navbar-inverse ： .navbar { background-color: white; } 不会改变背景。我必须进入 .brand 才能更改其中一个框的颜色。

  <div class="navbar-wrapper">
  <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
  <div class="container">

    <div class="navbar navbar-inverse">
      <div class="navbar-inner">
        <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="brand" href="#">------------</a>

有些东西压倒了它，所以我的问题更多来自基本层面。我是否必须设置确切的元素或者 CSS 是否允许我更改一个总体类并且它适用于该 div 中的内容。

我的第二个问题是：bootstrap.css 是否覆盖了我的自定义 css？

【问题讨论】：

标签： html css twitter-bootstrap navbar

【解决方案1】：

是的，有时会。使用网络检查器查看正在应用哪些规则。如果您希望您的自定义 CSS 覆盖 Bootstrap CSS，请重新排序您的 CSS <link> 并列出您的最后一个。或者更改bootstrap.css文件

编辑固定答案

【讨论】：

False，您必须在 Bootstrap 之后列出您的自定义 CSS 文件以覆盖它...stackoverflow.com/questions/8084964/…
我认为你的意思是：'list yours last'，因为他需要覆盖 Bootstrap
感谢您发现错误的措辞

【解决方案2】：

我认为您可以先调用 bootstrap.css 然后调用您的自定义 css 文件，因此它会覆盖引导 css 规则。

如果仍然没有更改默认引导 css，您可以使用重要属性。

navbar { background-color: white !important; }

我希望你的问题会得到解决。

【讨论】：

使用 !important 通常被认为是一种不好的做法
我以为我在某处读到使用 !important 不是最佳实践。当我最后列出我的 custom.css 并且 bootstrap.css 比我的自定义更具体时，引导程序仍将胜过自定义，对吗？
感谢@Pascamel 的建议。是的，这是不好的做法，但它的最后一个技巧，当无法解决任何问题时。我想如果在创建css文件链接时在其他文件末尾调用自定义css文件，问题就会解决。