2018更新
ブートストラップ4
navbarブレークポイントの変更は、Bootstrap 4でnavbar-expand-*
クラスを使用すると簡単です。
<nav class="navbar fixed-top navbar-expand-sm">..</nav>
navbar-expand-sm
= xs画面のモバイルメニュー<576px
navbar-expand-md
= sm画面のモバイルメニュー<768px
navbar-expand-lg
= md画面のモバイルメニュー<992px
navbar-expand-xl
= lg画面のモバイルメニュー<1200px
navbar-expand
=モバイルメニューを使用しない
(no expand class)
=常にモバイルメニューを使用
navbar-expand-*
モバイルメニューを除外すると、all
幅で使用されます。これは、6つのナビゲーションバーのすべての状態のデモです。ブートストラップ4のナビゲーションバーの例
小さなCSSを追加して、カスタムブレークポイント(??? px)を使用することもできます。たとえば、ここでは1300pxです。
@media (min-width: 1300px){
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
display: flex!important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
Bootstrap 4 カスタム Navbarブレークポイント
Bootstrap 4 Navbarブレークポイントの例
ブートストラップ3
Bootstrap 3.3.xの場合、navbarブレークポイントをオーバーライドするための動作する CSSは次のとおりです。991px
ナビゲーションバーを折りたたむポイントのピクセル寸法に変更します...
@media (max-width: 991px) {
.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;
}
}
991pxの動作例:http ://www.bootply.com/j7XJuaE5v6 1200pxの
動作例:https : //www.codeply.com/go/VsYaOLzfb4(検索フォームあり)
注:上記は768px以上で機能します。768px未満に変更する必要がある場合は、768px未満の例がここにあります。