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を使用する簡単な方法はありますか?
私が見つけることができる最良の方法は、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
私の場合、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>