変更ブートストラップnavbar崩壊にブレークポイントを使用せずに以下

StackOverflow https://stackoverflow.com/questions/19827605

質問

現在のブラウザの幅以下768px、navbar変更の崩壊モードになります。変えていきたいとの想いがこの幅1000pxそのブラウザは以下の1000pxのnavbar変更の崩壊モードになります。いこなし、スタイラスを使用していない。

私の課題であり、その主なものはこの質問: ブートストラップ3Navbar崩壊

ものすべてに回答する質問り方を説明変化による以下の変数.まだ扱っており、少ないスタイラスを使用していきたいなと思っていますかこのスタイラスまたは他の方法です。

よろしく！

役に立ちましたか？

解決 2

特定のものを書く必要があります メディアクエリ このため、768px未満の質問から、Navbarは崩壊しますので、768pxを超えて1000px以下で適用します。

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

これにより、ブートストラップユニットのデフォルトが発生するまで、Navbar崩壊が隠されます。崩壊クラスがフリップすると、Navbar崩壊内の内部資産が自動的に隠されます。

他のヒント

2018年の更新

ブートストラップ4

Navbarブレークポイントを変更することは、Bootstrap4では 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つのNavbar Statesすべてのデモです： Bootstrap 4 Navbarの例

また、小さな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 .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

ブートストラップ4 カスタム Navbarブレークポイント
ブートストラップ4 Navbarブレークポイントの例

**ブートストラップ3 **

ブートストラップ3.3.xの場合、次のようです 働く NavbarブレークポイントをオーバーライドするCSS。変化する 991px Navbarを崩壊させたい点のピクセル寸法...

@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未満の例はこちらです.

の bootstrap3, 、この変数を変更します @grid-float-breakpoint 必要なものに。デフォルト値は768pxです

最後に、「@grid-float-breakpoint」をいじることで崩壊幅を変更する方法を解決しました http://getbootstrap.com/customize/.

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;
  }
}

次の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;
    }

}

ブートストラップ3.less ソースコード, 、で定義された変数があります variables.less 呼び出されました @grid-float-breakpoint 次の有益なコメントがあります。

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

マッチング @grid-float-breakpoint-max 値はそのマイナス1pxに設定されています：

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

解決：

だから設定してください @grid-float-breakpoint 代わりに1000pxまでの値を再構築します bootstrap.less の中へ bootstrap.css:

例えば

@grid-float-breakpoint: 1000px;

ブートストラップ変数を変更するSASSの方法は、実際には ブートストラップサス githubページ。

@import bootstrapの前に変数を再定義するだけです：

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

@skelyの回答に加えて、作る ドロップダウンメニュー Navbar作業内では、クラスをオーバーライデンに追加します。最終コードベローズ：

    @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;
        }
    }

デモコード

Navbarsが利用できる.navbar-toggler,.navbar崩壊です。navbar拡大-{-sm|-md|-lg|-xl}クラス変更の場合そのコンテンツが崩れた後、ボタンを押します。組み合わせその他のユーティリティ、簡単に選択時の表示または非表示にする特定です。

のためのnavbars、この崩壊は、追加ます。navbar-拡大クラスのnavbar.のためのnavbarsることを常に崩壊んを追加。navbar-拡大クラスです。

例えば:

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

モバイルメニューには大きな画面になります。

参考：https://getbootstrap.com/docs/4.0/components/navbar/

ブートストラップV4では、さまざまなCSSクラスを使用して、遅かれ早かれナビゲーションを崩壊させることができます

例えば：

  • Navbar-togglable-sm
  • Navbar-togglable-md
  • Navbar-togglable-lg

ナビゲーションのボタン付き：

  • 隠されたスムアップ
  • 隠されたmd-up
  • 隠されたlg-up

これは私のために私のために機能しました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;
}

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

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

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

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

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

こんにちは私はあなたがこのような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;
    }
}

これは私にとって働くコードです。 （また、ドロップダウンNavbarリンクが機能します）

@media (max-width: 1199px) {
  .navbar-nav {
    margin: 7.5px -15px;
 }
  .ul-links {
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }  
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }

  .navbar-collapse.collapse {
      display: none!important;
      max-height: none;
  }
  .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;
  }
}

これが私にとってのトリックでした：

@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;
}

Bootstrap 4では、Navbar-Expand-*がハンバーガー（Navbar-Toggler）を拡張して崩壊させ、崩壊させ、隠しているときにオーバーライドしたい場合は、bootstrap.cssでそのスタイル/定義を見つけ、それを再定義する必要があります。独自のcustomstyle.css（または、あなたがそのように傾いている場合はbootstrap.cssで直接）。

例えば。 Navbar-Expand-LGに崩壊し、950pxでNavbar-Togglerを表示したかったのです。 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%;
    }
}

ここでは、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>

現在、Bootstrap 4.4でサポートされています

navbar-expand-sm
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top