web-dev-qa-db-ja.com

Bootstrap 4-ブレークポイントナビゲーションバーを変更しますか？

この質問はすでに尋ねられました ここ しかしこれはJavascriptのために機能しません。したがって、提供された回答では、CSSのみが変更され、JSは変更されていません。つまり、ナビゲーションバーのコンテンツは表示されますが、トグルは表示されません。解決策はありますか？

編集：

私の質問は、Bootstrap 4.xxのナビゲーションバーのブレークポイントを変更する方法です

twitter-bootstrapmenubreakpointsnavbootstrap-4
8
Piet

enter image description here

ブートストラップは、メニューを操作する簡単な方法を提供します。必要に応じて、navbar-expand-xl、navbar-expand-lg、navbar-expand-mdなどを使用できます。ありがとう

4
user1744669

ネイティブCSSの.navbar-expand-lgをオーバーライドします。

サンプルコードは次のとおりです。

    @media (min-width: *desired break point here){
.navbar-expand-lg {
    -ms-flex-flow: row nowrap !important;
    flex-flow: row nowrap !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .navbar-expand-lg .navbar-nav {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute !important;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none !important;
  }}
1
user10867411

（Bootstrap 4 Beta準拠）ブレークポイントをカスタマイズしたい場合は、私自身のサイトからこのスニペットを使用できます。定義されたブレークポイントの1つをコピーし、ニーズに合わせて変更しました。メニューがブランドと一致しないという問題がありましたが、フレックスラップオプションをオーバーライドすることで修正しました。実装するには、別のCSSファイルまたはインラインに追加するだけです。コード：

@media (max-width:1070px){.navbar-expand-srset>.container,.navbar-expand-srset>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:1071px){.navbar-expand-srset{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-srset .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-srset .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-srset .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-srset .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-srset>.container,.navbar-expand-srset>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-srset .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand-srset .navbar-toggler{display:none}.navbar{flex-wrap:nowrap!important;-ms-flex-wrap:nowrap!important;}}
1
Spotlightsrule