9

Twitter ブートストラップ 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 ブートストラップ ナビゲーション バー。モバイル レスポンシブ ビューでは、「固定リンク」がヘッダーに表示されたままになります。

さて、ブートストラップ 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-header」でラップしようとしましたが成功しませんでした。

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

ありがとう、

アレクサンドル

4

4 に答える 4

0

問題は、navbarが崩壊するポイントにあります。デフォルトでは、Bootstrap は 768px で折りたたまれます。これを増やすnavbarと、すぐに崩壊し、問題がなくなります。

これを行う最善の方法は、ブートストラップ ファイルをカスタマイズし、@grid-float-breakpointを 850px (または必要なサイズ) に変更することです。http://getbootstrap.com/customize/?id=9720390からブートストラップ 3 を簡単にカスタマイズできます。

お役に立てれば。

于 2014-03-27T07:31:33.100 に答える
0

私はこのように修正しました。ブランドの直後に、同じクラスと追加のクラスを持つ 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 はサイズ変更時にナビゲーション バーに残り、ナビゲーション バーは壊れません。

于 2016-09-29T13:38:30.440 に答える