1

在普通的网络浏览器中，如下所示在此处输入图像描述

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

  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 像在移动设备中一样跟随。

在此处输入图像描述

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

那么，如何更改媒体查询。

4

2 回答 2

1

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

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

  • 使用定制器
  • 下载更少的源代码并修改变量。

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

于 2013-08-30T07:24:26.367 回答
0

从与 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);
}
于 2013-08-30T08:26:03.590 回答