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媒體查詢不起作用

回答

相關問題