html - Bootstrap 768px 媒体查询不工作

Question

所以我想做一个响应式的bootstrap导航栏，但是在折叠的时候出现了问题。 css 使我折叠的导航栏看起来像 this .

我想做一个 meda 查询，这样当导航栏折叠发生时(768 像素)，这 3 个元素的所有 css 都会消失，所以它们将显示正常(bbbbbbb 离开屏幕，底部有 2 个滚动条没错，我想消失)，但是当我编写代码时，什么也没发生

HTML:

<div class="collapse navbar-collapse" id="colnav">
                    <ul class="nav navbar-nav navbar-right" id="navright">
                        <li><a href="#" id="a">aaaaaaa</a></li>
                        <li><a href="#" id="b">bbbbbbb</a></li>
                        <li><a href="#" id="c">ccccccc</a></li>
                    </ul>
                </div>

CSS:

#a
{
    padding: 20px 40px 20px 40px;
    text-transform: uppercase; 
}

#b
{
    padding: 20px 40px 20px 40px;
    text-transform: uppercase;
    margin: auto -5px auto -40px;
}

#c
{
    padding: 20px 35px;
    text-decoration: none;
    text-transform: uppercase;
    background-color: rgb(255, 165, 0);
    color: snow;
    margin-right: 10px;
}

媒体查询 CSS:

@media (max-width: 768px) 
{
    #a 
    {
       padding: 0;
        margin: 0;
    }
    #b
    {
       padding: 0;
        margin: 0;
    }
    #c
    {
       padding: 0;
        margin: 0;
    }
}

但是好像什么都没发生

编辑:这是一个代码笔 codepen.io/anon/pen/zoqwJO

Answer 1

见下文

.navbar-nav {
  margin-top: 0;
}
.navbar li a {
  text-transform: uppercase;
}
@media(min-width: 768px) {
  .navbar li a {
    padding: 20px 40px 20px 40px;
  }      
}
.navbar li.active a {
  background-color: rgb(255, 165, 0) !important;
  color: snow !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="./">aaaaaaaa <span class="sr-only">(current)</span></a></li>
        <li><a href="#">bbbbbbb</a></li>
        <li><a href="#">ccccccc</a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

https://jsfiddle.net/fjh3mvgv/

此外，我建议在使用媒体查询样式时向上移动，并让不在查询中的类成为基本样式，然后再向上样式化。例如:

.someclass {
  padding: 2em;
}

@media(min-width: 768px) {
  .someclass {
    padding: 1em;
  }
}