Bootstrap 768px媒体查询不起作用

所以我试图做一个响应式的bootstrap导航栏，但是当它折叠时会出现问题。 CSS让我的折叠式导航栏看起来像this。Bootstrap 768px媒体查询不起作用

我想做一个meda查询，所以当导航栏崩溃发生时（768px），所有来自这3个元素的css都会消失，所以它们会显示正常（bbbbbbb离开屏幕，并且有2个滚动条底部和右侧，我想消失），但是当我写我的代码，没有什么happends

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

来源

2016-11-12 Unfue

可以添加您的预计产量为 – Geeky

什么的屏幕快照如果你可以添加一个小提琴或codepen会很有帮助 – Geeky

@Geeky这里是一个codepen http://codepen.io/anon/pen/zoqwJO。我只是想要它，所以当导航栏被折叠，我打开它，所有的项目显示没有CSS，因为目前的CSS扭曲他们 – Unfue

见下

.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; 
    } 
}

来源

2016-11-12 21:57:50 developernator

检查这个片段

#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; 
 
    } 
 
}

<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>

希望它可以帮助

来源

2016-11-12 22:58:10 Geeky

Bootstrap 768px媒体查询不起作用

回答

相关问题