ブートストラップ4応答性の高いナビゲーションバー垂直

Question

私はブートストラップ4を使用しており、ページ上に水平なアイテムを含むナビゲーションを持っています。小さなデバイスでは、このメニューは崩壊し、メニュー項目は水平線のままです。縦書きに変更するにはどうしたらいいですか？アイテムは1行に1つずつありますか？

Answer 1

ブートストラップ4では、ブレークポイントが変更されています。 @mediaクエリの最大幅はnavbar-toggleable-*のために応じて調整する必要があります。

@media(max-width: 544px) { 
    .navbar .navbar-nav>.nav-item { 
     float: none; 
     margin-left: .1rem; 
    } 
    .navbar .navbar-nav { 
     float:none !important; 
    } 
    .navbar .collapse.in, .navbar .collapsing { 
     clear:both; 
    } 
} 

デモhttp://codeply.com/go/Ar1H2G4JVH

注：あなたはそれが小さな画面上で垂直になりたい場合は、このようなナビゲーションバーのCSSをオーバーライドする必要がありますnavbarで使用されるクラス。

• ナビゲーションバー-トグル-XS - 544px
• ナビゲーションバー - トグル - SM - 767px
• ナビゲーションバー-トグル-MD - 991px

UPDATE：余分なCSSは、もはやではありませんブートストラップ4アルファ6以降は、垂直方向にスタックするので、が必要です。http://www.codeply.com/go/cCZz5CsMcD