web-dev-qa-db-ja.com

bootstrap 4の折りたたみ可能なnavbarを積み重ねた

折りたたみ可能なnavbarを作成したいと思います。すべてが機能しますが、navアイテムは本来のように互いに積み重ねられません。それらは水平方向に隣り合っています。

コード：

<nav class="navbar navbar-light bg-faded" role="navigation">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsing-navbar">
        &#9776;
    </button>

    <div class="collapse navbar-toggleable-xs" id="collapsing-navbar">   
        <a class="navbar-brand" href="/">Logo</a>

        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a href="/messages" class="nav-link">Messages</a>
            </li>

            <li class="nav-item">
                <a href="/logout" class="nav-link">Logout</a>
            </li>
        </ul>
    </div>
</nav>

スクリーンショット：

bootstrap4 error

htmlcsstwitter-bootstrapbootstrap-4
15
Iter Ator

Bootstrap 4 Alpha 6（alpha 6バージョンのスタックメニューが組み込まれているため、追加のCSSを使用する必要はありません）：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

[〜＃〜] codepen [〜＃〜]

20
max

このCSSオーバーライドを使用すると簡単に実行できるようです。

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

[〜＃〜] update [〜＃〜]

BS4 alpha 6以降、余分なCSSは不要になりました。 navbarマークアップが変更されました。 http://www.codeply.com/go/0OMz6nfPLr

5
Zim

Bootstrap 4 Alpha 5以降、collapseプラグインを活用できます。

http://v4-alpha.getbootstrap.com/components/navbar/

<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
  <div class="collapse navbar-toggleable-md" id="navbarResponsive">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline float-lg-right">
      <input class="form-control" type="text" placeholder="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>
3
mwilson

折りたたみ可能なメニューが関係する場合、ブートストラップ4は少し異なるユーザーエクスペリエンスを示します。

アルファリリースでは、 this のようになります。ただし、この問題は未解決のままです Here .

1
Imran