Question

所以我正在尝试创建一个响应式引导程序导航栏，但崩溃时出现问题。 css使我的折叠导航栏看起来像this。

我想制作一个meda查询，这样当导航栏崩溃时（768px），这三个元素的所有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 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/

另外，我建议在使用媒体查询样式移动时，让不在查询中的类成为基本样式然后设置样式。 e.g：

.someclass {
  padding: 2em;
}

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

Answer 2

检查此代码段

＆＃13;

#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 40px;
  text-decoration: none;
  text-transform: uppercase;
  background-color: rgb(255, 165, 0);
  color: snow;
  margin-right: 20px;
}
@media screen and (max-width: 768px) {
  #a {
    padding: 0;
    margin: 0;
    text-transform: none;
  }
  #b {
    padding: 0;
    margin: 0;
    text-transform: none
  }
  #c {
    padding: 0;
    margin: 0;
    text-transform: none;
    color: inherit;
    background: transparent;
  }
}

＆＃13;

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
  <!--LOADER-->
  <div class="loader"></div>
  <!--NAVBAR-->
  <nav class="navbar navbar-default navbar-fixed-top shad" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button class="navbar-toggle collapsed" id="colbtn" type="button" data-toggle="collapse" data-target="#colnav" aria-expanded="false">
          <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 class="collapse navbar-collapse" id="colnav">
        <ul class="nav navbar-nav navbar-right" id="navright">
          <li><a href="#" id="a" role="link">aaaaaaa</a>
          </li>
          <li><a href="#" id="b" role="link">bbbbbbb</a>
          </li>
          <li><a href="#" id="c" role="button">ccccccc</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

＆＃13;

希望有所帮助

Bootstrap 768px媒体查询无法正常工作

2 个答案: