web-dev-qa-db-ja.com

ブートストラップ3ナビゲーションバーCollapse

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

この2つはブートストラップ2に適用できましたが、今はそうではありません。

Twitterのブートストラップに対応してナビゲーションバーの折りたたみしきい値を変更するにはどうすればいいですか？

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

twitter-bootstraptwitter-bootstrap-3navbar
198
timhc22

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

ブートストラップ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;
    }
}

mdサイズの場合は、991pxを1199pxで変更するだけです。

デモ

332
Seb33300

Bootstrap 2とBootstrap 3の大きな違いは、Bootstrap 3が「モバイル優先」であることです。

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

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

崩壊点をカスタマイズする

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

LESSを再コンパイルしようとしているなら、variables.lessファイルの中に記載のLESS変数があります。これは現在Bootstrap 3の用語では "拡大" @media (min-width: 768px)に設定されています。これは "小さな画面"（つまりタブレット）です。

@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を再コンパイルして、誤って何かをめちゃくちゃにしないようにするには厄介です）

私はそれが役立つことを願っています！

乾杯！

142
jmbertucci

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

変数を探す：

 @grid-float-breakpoint

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

34
mshahbazm

これらは変数で制御されていますので、ソースをざっと見る必要はありません。ブートストラップでは、最初に変数を試し、次に上書きします。それから戻って、変数をもう一度試します。

私はRailsで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

20
Doug Lee

Seb33300のおかげで私はこれがうまくいった。しかし、重要な部分が欠けているようです。少なくともブートストラップバージョン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;
    }
}
9
Daniel

私は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);

次に、を使ってナビゲーションバーの折りたたみ値を設定します。 @ grid-float-breakpoint デフォルトでは232に設定されています。 @スクリーンタブレット 。あなたが欲しいならあなたはピクセル値を使うことができます、しかし私はLESS変数を使うことを好みます。

7
Bastardo Sucio

あなたが直面している問題が メニューが複数の行に分かれている である場合、あなたは以下のうちの1つを試すことができます：

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

2）次のように、メニュー項目間の余白を減らします。

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

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

それぞれの面を変更したい場合は、

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

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

これは質問に答えませんが、CSSやLESS変数を使いたくない人には役立ちます。この問題を解決するための2つの一般的な方法。

6
PepitoSolis

私は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; }
}
3
cdonner

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

enter image description here

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にあるナビゲーションバーの形式とドロップダウンをモバイルバージョンにも変更するために必要です。

3
Bass Jobsen

私はLESSに慣れていないので、私はBootstrap 3.0.0の私のインストールでCSSのやり方をしました。これは私がカスタムcssファイル（bootstrap.cssの後にロードしたもの）に追加したコードで、メニューが常にaccordionのように動作するように制御することができました。
注： メインのメニューのように、自分のサイト上の他のナビゲーションバーに影響を与えないように、必要な動作を分離するためにnavbarクラスをsidebarクラスでdivで囲みました。あなたのニーズに合わせて調整してください、それが助けになることを願っています。

/* 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">

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

1
Markus

私は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定義を変更する必要があります。

お役に立てれば。

0
Cosmin

そして標準の768pxよりも幅 less で折りたたみたい人のために（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;
}
}
0
tony day