web-dev-qa-db-ja.com

bootstrap 4でレスポンシブなナビゲーションバーを無効にする

bootstrap 4でレスポンシブなnavBarを無効にする方法はありますか？モバイルバージョンのようにドロップダウンをしたくないので、ブランドの横に2つのリンクが表示される可能性があります。プラスとして、リンクをバーの右側に配置できるかどうか知りたいのですが、pull-xs-rightが正しく機能していないようです。

私の現在のコードは次のようになります：

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-light bg-faded">
    <a href="/" class="navbar-brand">PIM</a>
    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item"><Link class="nav-link" to="/login">Login</Link></li>
        <li class="nav-item"><Link class="nav-link" to="/signup">Sign up</Link></li>
    </ul>
</nav>

よろしくお願いします。

twitter-bootstrapnavbarbootstrap-4twitter-bootstrap-4
9
user2116499

最も簡単な方法は、 navbar-toggleable-xlnavbar-expandクラス（現在Bootstrap 4）になっているため、メニューはすべての幅で非モバイル（水平）になります。

<nav class="navbar navbar-expand navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-collapse collapse">
        <ul class="navbar-nav">
            <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">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

デモ： Bootstrap 4 Disable Responsive Navbar

flexboxユーティリティを使用して、小さい画面で垂直ナビゲーションバーを防ぐこともできます。 flex-nowrap flex-rowナビゲーションバーをすべての幅で水平のままにする...

<nav class="navbar navbar-light bg-faded justify-content-between flex-nowrap flex-row">
    <a href="/" class="navbar-brand">PIM</a>
    <ul class="nav navbar-nav flex-row">
        <li class="nav-item"><a class="nav-link pr-3" href="/login">Login</a></li>
        <li class="nav-item"><a class="nav-link" href="/signup">Sign up</a></li>
    </ul>
</nav>

仕組み：

navbar-expand-常に水平で、つぶれない
navbar-expand-xl-モバイルに縮小<1200px
navbar-expand-lg-モバイルに縮小<992px
navbar-expand-md-768ピクセル未満のモバイルに折りたたみます
navbar-expand-sm-576px以下のモバイルに縮小

番号 navbar-expand-常にモバイル、折りたたみ（デフォルト）

http://www.codeply.com/go/z9VJTOBuaS

27
Zim

ナビゲーションのみを使用することをお勧めしますが、ナビゲーションバーのスタイリングが必要な場合は、ヘルパークラスを追加し、ヘルパークラスを削除して必要に応じて機能させることで回避できます。これにより、トグルボタンのドロップダウン機能なしでモバイルにリンク項目が表示されます。

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-light bg-faded"> <a href="/" class="navbar-brand">PIM</a> <div id="navbarNav" class="navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item"> <Link class="nav-link" to="/login"> Login </Link> </li> <li class="nav-item"> <Link class="nav-link" to="/signup"> Sign up </Link> </li> </ul> </div> </nav>

[〜＃〜] jsfiddle [〜＃〜] 参照用。

0
Amir5000