39

そこにあるすべてのサンプルコードを試しましたが、何らかの理由で次のことができません:

+-------------------------------------------------------------------------------+
|               |                                        Login  [ search   ]    |
|  SITE LOGO    |---------------------------------------------------------------+
|               |                      Page 1  |  Page 2 |  Page 3 |  Page 4    |
+-------------------------------------------------------------------------------+

これを機能させる方法はないように感じています。私はこれを無駄にしようとしていますか？

4

2 に答える 2

56

それは可能ですが、あなたは本当にTBSの限界/目的を押し進めていると思います. 独自のマークアップを使用すると、TBS でこれを機能させるために必要な DIV スープを大幅に簡素化できます。

更新: Twitter Bootstrap 3 を使用して作成したこのソリューションの複製については、以下を参照してください。元の質問と回答は Bootstrap 2 に関するものでした。

フィドルの例

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

            <img src="http://placehold.it/70x70" class="span1" style="position:relative;top:10px">

            <div class="span10">
                <div class="row">
                    <div class="span2 offset5" style="text-align:right">
                        <div class="navbar-text">
                            <p><a href="#">Login</a></p>
                        </div>
                    </div>
                    <div class="span2 offset1">
                        <div class="pull-right">
                            <form class="navbar-form">
                                <div class="input-append">
                                    <input class="span2" id="appendedInputButtons" type="text">
                                    <button class="btn" type="button">Search</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="span10">
                        <ul class="nav pull-right">
                            <li><a href="#">Page 1</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">Page 2</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">Page 3</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">Page 4</a></li>
                        </ul>               
                    </div>
                </div>

            </div>

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

Twitter ブートストラップ 3 の更新:

TBS3 のナビゲーション バーのマークアップは、足場と同様にわずかに変更されました。これは、元のソリューションの 2 つの複製です。1 つは元のソリューションと完全に一致し、もう 1 つはバリエーションです。

正確な複製 http://jsfiddle.net/technotarek/t67Ms/

全幅 Navbar を使用したレプリケーション http://jsfiddle.net/technotarek/HxvLS/

(ヒント: nav タグの直後に続く div.container 要素を削除することで、すべての内部要素が navbar 全体にまたがるように 2 番目のレプリケーションを調整できます。)

于 2012-11-14T03:44:41.657 に答える