Bootstrap 768px媒體查詢不起作用

Question

因此，我嘗試制作一個響應式引導導航欄，但折疊時會出現問題。 CSS使我折疊的導航欄看起來像這樣。

我想進行一次meda查詢，以便當導航欄折疊發生（768px）時，這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 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;
  }
}

Answer 2

檢查此片段

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

希望能幫助到你

Bootstrap 768px媒體查詢不起作用

問題描述

2 個解決方案

解決方案1
0 2016-11-12 21:57:50

解決方案2
0 2016-11-12 22:58:10

Bootstrap 768px媒體查詢不起作用

問題描述

2 個解決方案

解決方案1 0 2016-11-12 21:57:50

解決方案2 0 2016-11-12 22:58:10

解決方案1
0 2016-11-12 21:57:50

解決方案2
0 2016-11-12 22:58:10