web-dev-qa-db-ja.com

最適な使用方法Bootstrap 3レスポンシブな折りたたみなしのNavbar

Bootstrap 3で単純なNavbarを作成しようとしていますが、これは折りたたまれません-左側にシンプルなタイトルがあり、右側にボタンがあるため、レスポンシブは必要ありません。

私の目標は、タイトル+ボタンをすべての解像度で常に同じように表示することです。このようなもの：

<div class="navbar navbar-fixed-top">

    <form class="navbar-form navbar-right">
        <button class="btn btn-default">Button 1</button>
        <button class="btn btn-default">Button 2</button>
    </form>

    <a class="navbar-brand" href="#">Title Here</a>

</div>

documentation から多くの組み合わせを試しました。 この投稿では、新しい.nav-headerクラスの使用方法の概要を説明しています 。 .nav-header内の要素を複製しようとしました-また、BS3メディアクエリスタイルをオーバーライドしようとしました。

折りたたみせずにNavbarを使用する簡単な方法はありますか？

twitter-bootstraptwitter-bootstrap-3navbar
29
Ender2050

私が見つけることができる最良の方法は、2 navbar-headerコンテナ、次にpull-leftおよびpull-rightは、レスポンシブメディアクエリに関連付けられていないためです。

<div class="navbar navbar-fixed-top">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Title Here</a>
    </div>
    <div class="navbar-header pull-right">
      <button type="button" class="btn btn-default navbar-btn">Button 1</button>
      <button type="button" class="btn btn-default navbar-btn">Button 2</button>
    </div>
</div>

Bootplyのデモ： http://bootply.com/74912

57
Zim

私の場合、navbar-headerのみを使用し、それ以外は使用しませんでした。

基本的に、navbar-headerを使用すると、すべてのヘッダーCSSを簡単に取得できます。その中に、コンテナを追加し、あなたと同じようなケースのオプションを試しました。

    <nav class="navbar navbar-default navbar-fixed-top" id="transient-header">
        <div class="container clearfix">
            <div class="transient-header-block clearfix">
                <h1 class="hide" href="/" style="color: #fff;">Primary</h1>
                <a class="navbar-brand" href="/">{{> svgs/logos/_white_symbol}}</a>
                <div class="pull-right price">
                    <a href="#" class="btn btn-white-border contact-modal" href="#contactModal">
                        {{> svgs/_white_rupee_icon}}
                        {{product.price}}
                    </a>
                </div>
            </div>
        </div>
    </nav>
1
ktkaushik