web-dev-qa-db-ja.com

Twitter bootstrap 3 navbar navbar-right outside navbar-collapse

Twitterでbootstrap 2.3.2私は次のようなものを持つことができます： http://jsfiddle.net/aQwUZ/3/

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

        <div class="navbar-inner">
            <div class="container">

                <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a href="#" class="brand">BRAND</a>
                <ul class="nav  pull-right">
                  <li>
                    <a href="#">Fixed Link</a>
                  </li>
                </ul>

                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="#">L1</a></li>
                        <li><a href=#">L2</a></li>
                    </ul>
                </div>

            </div>
        </div>
</div>

Twitter bootstrap navbar。モバイルレスポンシブビューでは、「固定リンク」はヘッダーに表示されたままです。

今、bootstrap 3で、コードをアップグレードした後、私は次のことしかできません： http://jsfiddle.net/EC3Ly/4/

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">BRAND</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                          <li>
                            <a href="#">Fixed Link</a>
                          </li>
                </ul>
                <div class="navbar-collapse collapse">

                    <ul class="nav navbar-nav">
                         <li><a href="#">L1</a></li>
                        <li><a href=#">L2</a></li>
                    </ul>

                </div>

            </div>
</nav>

モバイルレスポンシブビューでは、2行表示されます... "navbar-header"ノード http://jsfiddle.net/EC3Ly/5/ または最初の "navbar-ヘッダー」は成功しませんでした。

私は何を取りこぼしたか？

おかげで、

アレクサンドル

htmlcsstwitter-bootstrapnavbartwitter-bootstrap-3
9
heralight

モバイルナビゲーションバーの2行は、ナビゲーションバーヘッダーのclearfixが原因です。

.navbar-header {
  .clearfix();

  @media (min-width: @grid-float-breakpoint) {
    float: left;
  }
}

メディアクエリとcssを使用して、このクリアフィックスを元に戻すことができます（折りたたまれたドロップダウンの前に新しいフィックスを追加します）

.navbar-right {float: right !important;}

@media(max-width:767px)
{
    .navbar-right {margin-right:20px;}
    .navbar-header:after 
    {
    clear: none;
    }
    .navbar-nav.navbar-right > li { float: left; }

    .navbar-collapse:before {clear:both;}

    .navbar-collapse {overflow-y: hidden;}
    .navbar-collapse.in {overflow-y: visible;}
    .navbar{border-color: #101010; border-width: 0 0 1px;}
    .navbar-collapse.in > ul {border-color: #101010; border-top:1px double;}
}

}

デモ： http://bootply.com/82366

また、メディアクエリは、小さい画面でナビゲーションバーの右にフロートを追加します。このコードを本番環境で使用するには、境界線を修正し、ナビゲーションバーのcssトランジションも修正する可能性があります。

11
Bass Jobsen

私はBS3でも同じ問題に直面し、それを解決する唯一の方法はpull-leftとpull-rightの組み合わせを使用することでした

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">BRAND</a>
    </div>
    <div class="navbar-header pull-right">
      <ul class="nav navbar-nav pull-left">
        <li>
          <a href="#">Fixed Link</a>
        </li>
      </ul>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">L1</a></li>
        <li><a href="#">L2</a></li>
      </ul>                    
    </div>
  </div>
</nav>

作業デモ： http://bootply.com/78856

14
Zim

この方法で修正しました。ブランドの直後に、同じクラスと追加のクラスを持つ2つの新しい行を追加します。

        <!-- Branding Image -->
        <a class="navbar-brand" href="{{ url('/') }}">Home</a>
        <!-- Fake branding to avoid breaking up navbar -->
        <a class="navbar-brand navbar-brand-fake">Item 1</a>
        <a class="navbar-brand navbar-brand-fake">Item 2</a>

そしてこれをあなたのCSSファイルに追加してください：

a.navbar-brand-fake {
    font-size: 15px;
    line-height: 21px;
    margin-left: 2px !important;
}

サイズ変更時にホーム、アイテム1、アイテム2がナビゲーションバーに残り、ナビゲーションバーが壊れることはありません。

0
Erhnam

問題は、navbarが折りたたまれる点にあります。デフォルトでは、Bootstrapは768pxで折りたたまれます。これを増やすと、navbarはすぐに折りたたまれ、問題は解消されます。

これを行う最善の方法は、bootstrapファイルをカスタマイズして@grid-float-breakpoint〜850ピクセル（または必要なサイズ）。簡単にカスタマイズできますbootstrap 3 from http://getbootstrap.com/customize/?id=972039

お役に立てれば。

0
RemusT