Question

我正在使用Bootstrap 3.0，我想改变导航菜单的颜色以适应不同的屏幕尺寸（例如，红色代表iphone，黑色代表平板电脑等）。我尝试使用媒体查询做到这一点但到目前为止没有运气

我尝试了很多方法：

@media(max-width:480px) {
    .navbar-brand{
         position: absolute;
    top: 0;
    left: 0;
    width:170px;
    height:70px;

    }
    navbar-nav{
     color:#000000;      
}
    }


@media(max-width:480px) {
    .navbar-brand{
         position: absolute;
    top: 0;
    left: 0;
    width:170px;
    height:70px;

    }
    ul{
     color:#000000;      
}
    }

我尝试过分配不同的id仍然没有运气。任何人都可以帮忙吗？

编辑：添加了http://www.bootply.com/nxQHGFqLED整个CSS和html部分，也许我错过了一些东西。

Answer 1

你没有正确地做到这一点。我在Bootply上看到你的代码，你只使用max-width。例如，@ media（max-width：480px）{}中的代码将被@media中的代码覆盖（max-width：767px）{}

此外，你给ul.nav一个{color：＃b9b9b9！important}，这是不必要的，删除它！如果你真的需要，你应该使用！important来覆盖代码。您提供的代码中存在很多错误，请先修复它们。

Answer 2

尝试类似以下的内容 - 扩展html框以查看它。

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

我用过;

@media(min-width: 720px) {
    .navbar-inverse .navbar-nav>li>a,
    .navbar-inverse .navbar-nav>.active>a,
    .navbar-inverse .navbar-brand
    {
        color: red;    
    }
}
@media(min-width: 920px) {
    .navbar-inverse .navbar-nav>li>a,
    .navbar-inverse .navbar-nav>.active>a,
    .navbar-inverse .navbar-brand
    {
        color: blue;    
    }
}

http://jsfiddle.net/7vyjX/1/

无论如何都要改变不同屏幕尺寸的导航栏的字体颜色

2 个答案: