5

Bootstrap 4 を使用しており、ページに水平方向の項目を含むナビゲーションがあります。小さいデバイスでは、このメニューは折りたたまれ、メニュー項目はまだ水平に並んでいます。アイテムが各行に1つになるように縦に変更するにはどうすればよいですか?

4

2 に答える 2

0

Bootstrap 4 では、ブレークポイントが変更されました。小さな画面で垂直にしたい場合は、次のように navbar CSS をオーバーライドする必要があります。

@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

注: @media クエリの最大幅はnavbar-toggleable-*、navbar で使用されるクラスに応じて調整する必要があります。

  • navbar-toggleable-xs - 544px
  • navbar-toggleable-sm - 767px
  • navbar-toggleable-md - 991px

更新:ナビゲーション バーが垂直にスタックされるため、Bootstrap 4 Alpha 6 の時点で追加の CSS は不要になりました: http://www.codeply.com/go/cCZz5CsMcD

于 2016-03-31T11:41:51.627 に答える