ブートストラップ3ナビゲーションバーの折りたたみ

ブートストラップ3のナビゲーションバーが折りたたまれるポイントを増やす方法はありますか（つまり、縦長のタブレットではドロップダウンに折りたたまれるようになります）？

これら2つはブートストラップ2に適用可能でしたが、現在は適用できません。

Twitterブートストラップレスポンシブを使用してナビゲーションバーの折りたたみしきい値を変更する方法

デフォルトの応答性のあるナビゲーションバーのブレークポイントを変更する

今日も同じ問題がありました。

ブートストラップ4

これはネイティブの機能です：https : //getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

.navbar-expand{-sm|-md|-lg|-xl}クラスを使用する必要があります：

<nav class="navbar navbar-expand-md navbar-light bg-light">

ブートストラップ3

@media (max-width: 991px) {
    .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;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

ただ、変更991pxによって1199pxためのmdサイズ。

デモ

Bootstrap 2とBootstrap 3の大きな違いは、Bootstrap 3が「モバイルファースト」であることです。

つまり、デフォルトのスタイルはモバイルデバイス向けに設計されており、Navbarの場合はデフォルトで「折りたたまれ」、特定の最小サイズに達すると「展開」されます。

Bootstrap 3のサイトには、実際に何をすべきかについての「ヒント」があります。http： //getbootstrap.com/components/#navbar

折りたたみポイントをカスタマイズする

ナビゲーションバーのコンテンツによっては、ナビゲーションバーを折りたたみモードと水平モードに切り替えるポイントを変更する必要がある場合があります。@ grid-float-breakpoint変数をカスタマイズするか、独自のメディアクエリを追加します。

LESSを再コンパイルする場合は、variables.lessファイル内に上記のLESS変数が含まれています。現在@media (min-width: 768px)、Bootstrap 3用語で「小さな画面」（つまりタブレット）である「エキスパンド」に設定されています。

@grid-float-breakpoint: @screen-tablet;

折りたたみを少し長くしたい場合は、次のように調整できます。

@grid-float-breakpoint: @screen-desktop; （992pxブレークポイント）

またはもっと早く拡大する

@grid-float-breakpoint: @screen-phone （480pxブレークポイント）

後で拡張してLESSの再コンパイルを行わない場合は、768pxメディアクエリで適用されるスタイルを上書きして、以前の値に戻す必要があります。次に、適切なタイミングでそれらを再度追加します。

それを行うためのより良い方法があるかどうかはわかりません。Bootstrap LESSをニーズに合わせて再コンパイルするのが、最良の（最も簡単な）方法です。それ以外の場合は、Navbarに影響するすべてのCSSメディアクエリを見つけて、768px幅のデフォルトスタイルに上書きし、より高い最小幅に戻す必要があります。

LESSを再コンパイルすると、変数を変更するだけですべての魔法が実行されます。これが、LESS / SASSプリコンパイラのポイントです。=）

（注意、私はそれらすべてを調べましたが、約100行のコードです。アイデアを捨てて、特定のプロジェクト用にBootstrapを再コンパイルして、誤って何かを台無しにしないようにするのは十分に面倒です）

お役に立てば幸いです。

乾杯！

最も簡単な方法は、ブートストラップをカスタマイズすることです

変数を見つける：

 @grid-float-breakpoint

@ screen-smに設定されているため、必要に応じて変更できます。それが役に立てば幸い！

これらは変数で制御され、ソースをいじくる必要はありません。ブートストラップでは、最初に変数を試し、次にオーバーライドします。次に戻って変数をもう一度試します;）

レール付きのbootstrap-sassを使用しましたが、デフォルトのLESSと同じです。

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

それでおしまい！この変数のリファレンスページは非常に便利です：https : //github.com/twbs/bootstrap/blob/master/less/variables.less

Seb33300のおかげで、これは機能しました。しかし、重要な部分が欠けているようです。少なくともBootstrapバージョン3.1.1では。

私の問題は、ナビゲーションバーが適切な幅でそれに応じて折りたたまれたが、メニューボタンが機能しないことでした。メニューを展開したり折りたたんだりできませんでした。

これは、collapse.inクラスが.navbar-collapse.collapseの！importantによってオーバーライドされ、「collapse.in」も追加することで解決できるためです。Seb33300の例を以下に示します。

@media (max-width: 991px) {
    .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-collapse.collapse.in {
        display: block!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;
    }
}

私はjmbertucciの回答に賛成票を投じてコメントしたかったのですが、私はまだコントロールに信頼されていません。私は同じ問題を抱えていて、彼が言ったようにそれを解決しました。Bootstrap 3.0を使用している場合は、variables.lessのLESS変数を編集します。レスポンシブブレークポイントは200行目あたりに設定されています。

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

次に、232行目で@ grid-float-breakpoint変数を使用して、ナビゲーションバーの折りたたみ値を設定します。デフォルトでは、@ screen-tabletに設定されてい ます。ピクセル値を使用することもできますが、LESS変数を使用することをお勧めします。

直面している問題がメニューが複数行に分かれている場合は、次のいずれかを試すことができます。

1）メニュー項目の削除や単語の短縮など、メニュー項目の数または長さを減らすようにしてください。

2）次のように、メニュー項目間のパディングを減らします。

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

デフォルトのパディングは、両側（左と右）に15pxです。

個々のサイドの使用を変更したい場合：

padding-left: 7px; 
padding-right: 8px;

この設定はドロップダウンリストにも影響します。

これは質問の答えにはなりませんが、CSSをいじったり、LESS変数を使用したくない他の人を助けることができます。この問題を解決するための2つの一般的なアプローチ。

nabvarは小さなデバイスでは崩壊します。折りたたみのポイントは、変数内の@ grid-float-breakpointによって定義されます。デフォルトでは、768pxより前になります。画面幅が768ピクセル未満の画面の場合、ナビゲーションバーは次のようになります。

variables.lessの@ grid-float-breakpointを変更して、Bootstrapを再コンパイルすることが可能です。これを行うときは、navbar.lessの@ screen-xs-maxも変更する必要があります。この値を新しい@ grid-float-breakpoint -1に設定する必要があります。https://github.com/twbs/bootstrap/pull/10465も参照してください。これは、@ grid-float-breakpointのナビゲーションバーフォームとドロップダウンをモバイルバージョンに変更するためにも必要です。

Bootstrapのカスタマイズからのメンテナンスとアップグレードの問題が心配です。今日、カスタマイズ手順を文書化できます。3年後にBootstrapをアップグレードする人が文書を見つけて、手順を再適用してください（その時点で機能する場合と機能しない場合があります）。引数はどちらの方法でも作成できると思いますが、コードではカスタマイズを維持することをお勧めします。

ただし、Seb33300のアプローチがどのように機能するかはよくわかりません。確かにBootstrap 4.0.3では動作しませんでした。ナビゲーションバーを768ではなく1200で展開するには、両方のメディアクエリのルールを上書きして、768での展開を防ぎ、1200で強制的に展開する必要があります。

iPadを縦向きモードで折り返す長いメニューがあります。次の例では、1200ブレークポイントまでメニューを折りたたみます。

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

私はBootstrap 3.0.0のインストールでCSSを使用しました。これは、LESSにあまり慣れていないためです。これは、カスタムcssファイル（bootstrap.cssの後にロードする）に追加したコードで、これを使用してメニューを常にのように制御できるようにしましたaccordion。
注：必要な動作を分離するために、全体navbarをdiv内でラップしてsidebar、メインメニューなど、サイトの他のナビゲーションバーに影響を与えないようにしました。ニーズに合わせて調整してください。

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

追記：メインメニューのトグルにも変更を加えましたnavbar（私のサイトの上のコードはサイドの「サブメニュー」に使用されているためです）。

私が変更され：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

に：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

そしてまた調整されました：

<div class="navbar-collapse collapse navbar-collapse">

に：

<div class="navbar-collapse collapse navbar-collapse-topmenu">

あなたが1つだけを持っているならnavbar、私はこれについて心配する必要はないと思うが、それは私の場合に私を助けた。

そして、標準の768px 未満の幅で折りたたむ（768px未満の幅でエキスパンドする）場合、これは必要なCSSです。

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

折りたたみブレークポイントを変更するための簡単な解決策は、CSSだけで見つけたと思います。

私はそれを徹底的にテストしなかったので、他の人がそれを確認できることを願っています。このソリューションに副作用があるかどうかはわかりません。

次のクラス定義のメディアクエリ値を変更する必要があります。

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;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
    }
}

これが私の現在のプロジェクトではうまくいきましたが、すべての画面サイズに合わせてメニューを適切に配置するには、CSS定義を変更する必要があります。

お役に立てれば。