更改引導3.3.6導航欄摺疊斷點

當前瀏覽器寬度下降到768px以下時，.navbar更改爲摺疊模式。我想這個寬度更改爲992px，所以當瀏覽器低於992px的.navbar變爲收縮狀態..我用引導3.3.6更改引導3.3.6導航欄摺疊斷點

我使用這個代碼，但它不工作對我來說

@media screen and (max-width: 992px) { 
.navbar-header { 
    float: none; 
} 
.navbar-left,.navbar-right { 
    float: none !important; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse { 
    border-top: 1px solid transparent; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
} 
.navbar-fixed-top { 
    top: 0; 
    border-width: 0 0 1px; 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
    margin-top: 7.5px; 
} 
.navbar-nav>li { 
    float: none; 
} 
.navbar-nav>li>a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
.collapse.in{ 
    display:block !important; 
} 
}

來源

2015-12-27 kev

什麼是「它不爲我工作」的實際含義，因爲上面的代碼不會完成你的問題問什麼。 – vanburen

是的，但它不起作用在我的項目中，我不知道爲什麼 – kev

然後，你應該花時間發佈相關代碼（HTML等）和任何其他有關您工作環境的信息。 – vanburen

推薦的方法是使用Bootstrap的'Customize and download'函數來根據您的需求定製Bootstrap。

或者你可以改變你的媒體查詢，但你可能最終覆蓋了一堆類：

@media (min-width: 768px) and (max-width: 992px) { 
    .collapse { 
     display: none !important; 
    } 
}

來源

2015-12-27 11:49:31 sjokkogutten

感謝的人，我想我會嘗試下載一個自定義bootstrap：D – kev

這工作，和導航欄在992px崩潰與下面的CSS代碼：

@media (min-width: 992px) { 
    .navbar-right .dropdown-menu { 
    left: auto; 
    right: 0; 
    } 
    .navbar-right .dropdown-menu-left { 
    left: 0; 
    right: auto; 
    } 
} 

@media (min-width: 992px) { 
    .navbar-header { 
    float: left; 
    } 
} 
@media (min-width: 992px) { 
    .navbar-collapse { 
    width: auto; 
    border-top: 0; 
    -webkit-box-shadow: none; 
      box-shadow: none; 
    } 
    .navbar-collapse.collapse { 
    display: block !important; 
    height: auto !important; 
    padding-bottom: 0; 
    overflow: visible !important; 
    } 
    .navbar-collapse.in { 
    overflow-y: visible; 
    } 
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse { 
    padding-left: 0; 
    padding-right: 0; 
    } 
} 
@media (min-width: 992px) { 
    .container > .navbar-header, 
    .container-fluid > .navbar-header, 
    .container > .navbar-collapse, 
    .container-fluid > .navbar-collapse { 
    margin-right: 0; 
    margin-left: 0; 
    } 
} 
@media (min-width: 992px) { 
    .navbar-fixed-top, 
    .navbar-fixed-bottom { 
    border-radius: 0; 
    } 
} 
@media (min-width: 992px) { 
    .navbar-fixed-top, 
    .navbar-fixed-bottom { 
    border-radius: 0; 
    } 
} 
@media (min-width: 992px) { 
    .navbar > .container .navbar-brand, 
    .navbar > .container-fluid .navbar-brand { 
    margin-left: -15px; 
    } 
} 
@media (min-width: 992px) { 
    .navbar-toggle { 
    display: none; 
    } 
} 
@media (min-width: 992px) { 
    .navbar-nav { 
    float: left; 
    margin: 0; 
    } 
    .navbar-nav > li { 
    float: left; 
    } 
    .navbar-nav > li > a { 
    padding-top: 15px; 
    padding-bottom: 15px; 
    } 
} 
@media (min-width: 992px) { 
    .navbar-form { 
    width: auto; 
    border: 0; 
    margin-left: 0; 
    margin-right: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    } 
} 
@media (min-width: 992px) { 
    .navbar-text { 
    float: left; 
    margin-left: 15px; 
    margin-right: 15px; 
    } 
} 
@media (min-width: 992px) { 
    .navbar-left { 
    float: left !important; 
    } 
    .navbar-right { 
    float: right !important; 
    margin-right: -15px; 
    } 
    .navbar-right ~ .navbar-right { 
    margin-right: 0; 
    } 
}

來源

2015-12-27 14:36:10

謝謝你，但它不適合我：/我試了很多代碼，但我不能修復：/ – kev

我一直在尋找完全一樣的東西，我發現this，它工作100％！

您需要添加這個CSS

@media (max-width: 992px) { 
.navbar-header { 
    float: none; 
} 
.navbar-left,.navbar-right { 
    float: none !important; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse { 
    border-top: 1px solid transparent; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
} 
.navbar-fixed-top { 
    top: 0; 
    border-width: 0 0 1px; 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
    margin-top: 7.5px; 
} 
.navbar-nav>li { 
    float: none; 
} 
.navbar-nav>li>a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
.collapse.in{ 
    display:block !important; 
} 
}

你也需要這個JavaScript

$('#monitor').html($(window).width()); 

    $(window).resize(function() { 
    var viewportWidth = $(window).width(); 
$('#monitor').html(viewportWidth); 
});

如果它不工作，我回答這些問題...

待辦事項你使用navbar-fixed-top？
你使用navbar-inverse？

看看我的HTML代碼，它可以幫助你......

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <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> 
    <!-- This is the main nav menu content --> 
    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav hover-effect"> 
     <li><a href="#header">Home</a></li>..........

來源

2015-12-29 09:39:11 BigDropGR

我試圖與引導3.3.6下面的代碼和它的作品。

@media (max-width: 996px) { 
.navbar-header { 
    float: none; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse { 
    border-top: 1px solid transparent; 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
    margin: 7.5px -15px; 
} 
.navbar-nav>li { 
    float: none; 
} 
.navbar-nav>li>a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
}

請檢查該jsfiddle

來源

2016-03-22 12:06:48 avnaveen

更改引導3.3.6導航欄摺疊斷點

回答

相關問題