css - 在 Twitter Bootstrap 的媒体查询中更改导航栏内部颜色

Question

在普通的网络浏览器中看起来像下面的

我已经在不同的文件代码中覆盖了 Bootstrap 的以下规则，下面给出了代码

  body {
        margin-left: 8px;
        margin-right:8px;

    }

    div .span8 {
        border: 2px solid rgb(121, 25, 77);
        border-radius: 10px 10px 10px;
        background-color: rgb(188, 187, 178);
    }

    div .span2 {
        border: 2px solid rgb(163, 43, 70);
        border-radius: 10px 10px 10px;
        background-color: rgb(240, 225, 200);
    }
    .navbar-inner {
        background-image: linear-gradient(to bottom, #04998D, #f2f2f2);
    }

    .navbar .nav > li > a {
        color: #D33333;
        text-shadow: 0 1px 0 #19B95F;
    }

    .navbar .nav li.dropdown.open > 
    .dropdown-toggle, .navbar .nav li.dropdown.active > 
    .dropdown-toggle, .navbar .nav li.dropdown.open.active > 
    .dropdown-toggle {
         color: #555555;
         background-color: #83C0AF;
      }

      .dropdown-menu {
          background-color: #64bead;
          background-image: linear-gradient(to bottom, #04998D, #f2f2f2);
      }

我的问题是当我从任何移动设备浏览它时，我发现 navbar-inner 没有变化。其他的都变了。我知道，我必须更改 bootstrap-responsive.css 文件。但我不知道我将如何改变它。

我希望我的 nabar 喜欢在手机上关注。

但是导航栏的颜色和以前一样是白色的。

那么，我该如何改变媒体查询。

Answer 1

要自定义 Bootstrap ，请参阅 Customizing Bootstrap documentation.查看自定义组件子部分。
因此，在您的情况下，您应该覆盖在 bootstrap.css 之后加载的 css 中的 .navbar-inner。

要更改配色方案，您还可以:

• 使用customizer
• 下载较少的源代码并修改变量。

通过这样做，您可以在所有地方更改颜色，因此您不必通过整个 css 搜索特定颜色并将其替换为新颜色。