LESSを使用せずにブートストラップナビゲーションバーの折りたたみブレークポイントを変更する


205

現在、ブラウザーの幅が768pxを下回ると、ナビゲーションバーは折りたたみモードに変わります。この幅を1000pxに変更したいので、ブラウザーが1000px未満になると、ナビゲーションバーが折りたたみモードに変わります。LESSを使用せずにこれを実行したいのですが、LESSではなくスタイラスを使用しています。

私の問題はこの質問と同じです:Bootstrap 3 Navbar Collapse

しかし、その質問のすべての回答は、LESS変数を変更してそれを行う方法を説明しています。私はLESSを扱っていません。スタイラスを使用しているので、スタイラスまたは別の方法を使用してこれを行う方法を知りたいです。

ありがとう!

回答:


50

あなたはこれのために特定のメディアクエリを書く必要があります、あなたの質問から、768pxの下で、ナビゲーションバーは折りたたまれるので、それのように768pxの上と1000pxの下でそれを適用してください:

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

これにより、ブートストラップユニットがデフォルトで発生するまで、ナビゲーションバーの折りたたみが非表示になります。折りたたみクラスが反転すると、ナビゲーションバーの折りたたみ内の内部アセットが自動的に非表示になります。同様に、CSSを目的のデザインに設定する必要があります。


現在、幅が768pxを下回ると、ナビゲーションバーが折りたたまれます。しかし、幅が1000px未満の場合、ナビゲーションバーを折りたたみます。これには、768から1000の.collapseを表示する必要がありますか?
ニアポイント

はい、collapseクラスはモバイル画面にとって重要です。幅が768px未満の場合、ナビゲーションバーはになるdisplay:noneため、必要なアクションは768および1000のマーク内に適用されます...
SaurabhLP 2013年

64
navbar-collapse.collapseを持っている別のルールがあるため、これはBootstrap 3では機能しませんdisplay: block !important。それを無効にすると、表示されない...私はそれがニーズを再定義することを、クラスの多くだと思うので、だけでなく、崩壊のボタンになりますcollapse
ダニエル・リッチ

42
はい、一連
Zim

1
地獄のブートストラップを作った母?その小さな詳細を変更する必要があると思いませんでしたか?
MH

400

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未満例がここにあります



この最初のアクセスを試してください:[link](getbootstrap.com/customize Locate: 'Less variables' –> 'Media query breakpoints' Change:@ screen-lg value from 1200px to 1920px Locate:“ Grid system” –> @ grid-float -breakpoint Change:@ screen-sm-min to @ screen-lgページの最後までスクロールし、「コンパイルしてダウンロード」をクリックし、これらのダウンロードしたファイルを抽出して使用します
rpalzona

6
この上のコードは、768pxより高い値を設定すると機能しますが、逆を達成する必要があります...たとえば、400pxで縮小するだけですが、この値を設定すると、ブートストラップが元の768を拾っているようです- 何か案は?ありがとう
クリスリチャーズ

6
この答えはチャームのように機能しますがドロップダウンメニューいじくりますが、答えを改善する必要があるかもしれません。
Abhishek Pandey 2017年

2
@AbhishekPandey この回答が役に立ったと思います(ドロップダウンに関する部分)
cbuchart 2018年

1
ありがとうございました。横にチェックマークが付いている「ソリューション」とは異なり、コードは実際に機能します。
マイケルS.ミラー

46

bootstrap3、この変数を変更@グリッド・フロート・ブレークポイントをあなたが必要とするものに。デフォルト値は768pxです


17
例を投稿できますか?
e.thompsy 2015年

2
sassを使用していて、ベンダーコードを置き換えたくない場合は(置き換えてはいけません)、ブートストラップsassファイルの前に、カスタム値を持つ変数を含むファイルを含める必要があることに注意してください。その理由は、Bootstrapのすべての変数がデフォルトに設定されているためです。値なので、最初に変数をインポートしてこれらの値をオーバーライドする必要があります。
Makis K.16年

これを行う方法の例を追加してください...私はブートストラップが初めてで、grepはプロジェクト内でこの変数の0インスタンスを明らかにします。
Matt Clark

1
@MattClark @grid-float-breakpointはコンパイラーで定義されています:getbootstrap.com/customize-デフォルト値は@screen-sm-minですが、に変更できます1234px
rybo111 2016年

24

最後に、http://getbootstrap.com/customize/で '@ grid-float-breakpoint'をいじって折りたたみ幅を変更する方法を考え出しました

bootstrap.css(または最小バージョン)の行2923に移動し、次のように変更@media screen and (min-width: 768px) {します。@media screen and (min-width: 1000px) {

したがって、コードは次のようになります。

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

カスタマイザを使用した場合は、引用した行番号が異なることに注意してください:getbootstrap.com/customize
henrywright

1
ちょうど@grid-float-breakpoint私のresponsive.less作品で私を変えました!
cvng 2014

6
ブートストラップcssファイルを直接変更するのではなく、別のCSSファイルでオーバーライドする必要があります。
Ivanka Todorova、2015

1
最初のアクセス:[link](getbootstrap.com/customize Locate: 'Less variables' –> 'Media query breakpoints' Change:@ screen-lg value from 1200px to 1920px Locate:“ Grid system” –> @ grid-float-breakpoint変更:画面-SM-分@ @画面-LGスクロールにページの最後に「コンパイルとダウンロード」エキスをクリックして、これらのダウンロードされたファイルを使用しています。。
rpalzona

13

次のCSSコードを使用して、これを成功させました。

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

2
幅が768pxから1000pxの間の場合、折りたたまれたメニューボタンは表示されません。
職人

4
@craftsman:ボタンには、次を使用します:.navbar-toggle {display:block!important; } .navbar-header {width:100%; 高さ:60px; }
Aniket Suryavanshi 2015年

3
それでもハンバーガーメニュー内のコンテンツは表示されません
behzad

13

Bootstrap 3の.LESS ソースコードには、variables.lesscalled @grid-float-breakpointで定義されている変数があり、次の役立つコメントがあります。

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

一致する@grid-float-breakpoint-max値は、そのマイナス1ピクセルに設定されます。

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

解決:

したがって、@grid-float-breakpoint代わりに値を1000pxに設定して、次のように再構築bootstrap.lessbootstrap.cssます。

例えば

@grid-float-breakpoint: 1000px;

再構築する方法は?私はこのコマンドラインを試しました$ lessc bootstrap.less bootstrap.cssが、何も起こりませんでした
AnthonyR '21 / 10/21

@AnthonyRn:私はあなたのプロジェクト設定が何であるかわかりません。私はVS 2013プロジェクトのBootstrap LESSソースを更新し、保存時に再構築しました。多分あなたは新しい質問をするべきですか?
コーディングを行った2015年

私の問題は、Bootstrapのオンラインカスタマイザツールを使用することによって解決され ました。ここでgetbootstrap.com/customize解決策をありがとう!
AnthonyR 2015年

1
これは、Bootstraps独自のメソッドを使用してブレークポイントを定義するため、これが受け入れられる答えになるはずです。例として、簡単な「再構築」ブートストラップを行うことができ、この変数をブレークポイントにするために必要なものに設定することで、望ましい結果を得ました。
セルジュメリス

@AnthonyR再構築するにはgrunt dist、distディレクトリを再生成するgruntコマンドを使用します。gruntfile.jsがあるディレクトリからそのコマンドを実行します。参照:getbootstrap.com/getting-started/#grunt
Radmation

11

ブートストラップ変数を変更するSassの方法は、実際にはbootstrap-sass githubページに記載されています。

ブートストラップを@importする前に変数を再定義するだけです。

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

7

@Skely回答に加えて、ナビゲーションバー内のドロップダウンメニューを機能させるには、オーバーライドするクラスも追加します。以下の最終コード:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 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;
        }
    }

デモコード


4

ブートストラップv4では、ナビゲーションはさまざまなcssクラスを使用して遅かれ早かれ折りたたむことができます

例えば:

  • navbar-toggleable-sm
  • navbar-toggleable-md
  • navbar-toggleable-lg

ナビゲーション用のボタンで:

  • 隠されたSMアップ
  • hidden-md-up
  • hidden-lg-up

現在のアルファではnavbar-toggleable-sm、私だけに行くようで、xs決して切り替えません。私が何か間違ったことをしているのかもしれません。ありがとう!
nerdwaller 2017

@nerdwallerはあなたが正しいように見え、xsからsmに編集を加えました。
ホイットニーランド

3

Bootstrap 3.3の場合、これが必要な唯一のコードです。

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

完全には機能しません。表示されるメニュー項目は垂直ではなく水平です。
Volomike

3

これは私のために働いたBootstrap3

@media (min-width: 768px) {
    .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;
      }
}

これら2つを理解するのにしばらくかかりました:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

これでうまくいきました。唯一の例外は、上記のサンプルでは最小ピクセル幅が1000pxであることです。
Sascha、

2

最善の策は、使用するCSSプロセッサのポートを使用することです。

私はSASSの大ファンなので、現在https://github.com/thomas-mcdonald/bootstrap-sassを使用しています

ここにスタイラスのフォークがあるようです:https : //github.com/Acquisio/bootstrap-stylus

それ以外の場合、CSSバージョンでは検索と置換があなたの親友です...


では、検索と置換オプションの場合、それはbootstrap.cssメディアクエリを直接編集することを意味しますか?ナビゲーションバーにのみ適用されるメディアクエリを変更できますか?ソースブートストラップファイルを編集するのは良い考えではないと言われましたが、理由はわかりません。どう思いますか?
ニアポイント

1

こんにちは私はあなたがこのようにCSSを使用してそれを行うことができると思いますあなたはブレークポイントのブートストラップメニューを変更できます

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

1

ナビゲーションバーは、.navbar-toggler、.navbar-collapse、および.navbar-expand {-sm | -md | -lg | -xl}クラスを使用して、コンテンツがボタンの背後で折りたたまれたときに変更できます。他のユーティリティと組み合わせて、特定の要素を表示または非表示にするタイミングを簡単に選択できます。

決して折りたたまれないナビゲーションバーの場合、ナビゲーションバーに.navbar-expandクラスを追加します。常に折りたたむナビゲーションバーの場合は、.navbar-expandクラスを追加しないでください。

例えば ​​:

<nav class="navbar navbar-expand-lg"></nav>

大画面でモバイルメニューを表示しています。

リファレンス:https : //getbootstrap.com/docs/4.0/components/navbar/


はい、これは私が必要とするとおりに機能します。もちろん、より具体的なブレークポイントが必要な場合は、独自のメディアクエリを構成する必要があります(したがって、この質問に対する好ましい答えです)
Coderhi

0

これは私にとってトリックでした:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

あなたのソリューションとVeekのソリューションでは、768〜1000のマージンが不適切に拡大していることがわかりました。それらはそれらの制限の外で問題ありません。ソリューションでは、折りたたまれたメニューのアイコンも折りたたまれた後、右側にとどまらず、「ブランド」を押し上げます。
Mike O'Connor

申し訳ありませんが、私はどうやら間違えました。これらの制限内に不適切に広いマージンが表示されるという問題はまだあります。ただし、公式のオンラインブートストラップの例では、ネイティブで同じマージンの問題が発生することがわかりました。
Mike O'Connor

0

ブートストラップ4では、navbar-expand- *、展開、折りたたみ、およびハンバーガー(navbar-toggler)の表示と非表示をオーバーライドする場合は、bootstrap.cssでそのスタイル/定義を見つけ、再定義する必要があります。独自のcustomstyle.css(または、必要に応じてbootstrap.cssに直接)。

例えば。navbar-expand-lgが折りたたまれ、navbar-togglerが950pxで表示されるようにしました。bootstrap.cssで私は見つけます:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

そしてその下に...

@media (min-width:992px) { 
    ... lots of styling ...
}

私は両方の@mediaクエリをコピーして自分のstyle.cssに貼り付け、必要に応じてサイズを変更しました。私の場合、950pxで折りたたみたいと思っていました。@mediaクエリは異なるサイズである必要がある(私が推測している)ため、コンテナーの最大幅を949.98pxに設定し、他の@mediaクエリに950pxを使用したため、次のコードがstyle.cssに追加されました。これは、Stackoverflowや他の場所で見つけたねじれたソリューションから簡単に解くことができませんでした。お役に立てれば。

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

0

ここで、React with Bootstrapで使用する私の作業コード

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

0

Bootstrap 4.4でサポートされるようになりました

navbar-expand-sm 

はい、正しいですが、大画面でナビゲーションを折りたたむにはnavbar-expand-lgが必要です
Coderhi
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.