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

Question

在普通网页浏览器中看起来像

我已经在不同的文件代码中覆盖了引导程序的以下规则，如下所示

  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

有关自定义引导的信息，请参阅Customizing Bootstrap documentation.查看自定义组件子部分 所以在你的情况下你应该覆盖在bootstrap.css之后加载的css中的.navbar-inner。

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

• 使用customizer
• 下载更少的来源并修改变量。

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

Answer 2

在与Sentencio的讨论中，我发现了自己的错误。现在我要告诉我是如何解决它的。

我使用-webkit-gradient，-webkit-linear-gradient，-moz-linear-gradient和linear-gradient更改了所有背景图像属性。代码如下：

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #fafafa;
  background-image: -moz-linear-gradient(top, #04998D, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04998D), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #04998D, #f2f2f2);
  background-image: -o-linear-gradient(top, #04998D, #f2f2f2);
  background-image: linear-gradient(to bottom, #04998D, #f2f2f2);
  background-repeat: repeat-x;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  *zoom: 1;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}