0

次のサンプルテンプレートをご覧ください：http：//jsfiddle.net/D8cye/2/

ご覧のとおりnavbar、サイドバーの下部に展開されます。なんで？どうすればこれを回避できますか？

を設定することでこれを回避できることを知っています.navbar-inner{height:40px;}。しかし、私は何か間違ったことをしていると感じています。おそらく、流体グリッドで何かを誤解しているのかもしれません。

4

2 に答える 2

1

ここでフォークしましたhttp://jsfiddle.net/Astraldiva/r6tHv/。

ツイッターのブートストラップを流動的なレイアウトで使用する際に考慮すべき重要なことの1つは、固定幅のアイテムを持たないことです。そうしないと、レイアウトが壊れてしまいます。これが役立つかどうかはわかりませんが、コンテナを再配置し、コンテンツをspan8 + span4 divに配置して、希望どおりのレイアウトを作成しました。このバージョンは、さまざまな画面サイズで動作するはずです。

 <div class=row-fluid>
    <div class=span8>
        <div id=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class=navbar>
            <div class=navbar-inner>
                <ul class=nav>
                    <li class=active><a href=#>Home</a></li>
                    <li><a href=#>Link</a></li>
                    <li><a href=#>Link</a></li>
                 </ul>
             </div>
         </div>
    </div>
    <div class=span4>
        <div class=box></div>
        <div class=box></div>
        <div class=box></div>
    </div>
</div>

編集

必要なレイアウトを取得するために、ピーターはこのフィドルで私のアイデアを拡張しました。

2列のレイアウトがあり、サイドバーと流体コンテンツ領域（最大幅と最小幅）で固定されています。したがって、完全に流動的ではありませんが、問題は解決します。

<div id=container>
    <!-- Sidebar is floated right and has fixed width -->
    <div id=side>
        <div class=box></div>
        <div class=box></div>
        <div class=box></div>
    </div>
    <!-- Content wrapper is in normal flow with margin-right of at least the width of a sidebar-->
    <div id=main>
        <div class=row-fluid>
          <div class=span12>
            <div id=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

            <div class=navbar>
                <div class=navbar-inner>
                    <ul class=nav>
                        <li class=active><a href=#>Home</a></li>
                        <li><a href=#>Link</a></li>
                        <li><a href=#>Link</a></li>
                    </ul>
                </div>
            </div>
          </div>
      </div>
    </div>
</div>

CSS：

#container {
border: 1px solid #f00;
max-width: 600px;
min-width: 300px;
}

#side {
float: right;
width: 100px;
border: 1px solid #0f0;
}

#main {
margin-right: 108px;
border: 1px solid #00f;
}

#text {
padding: 8px; margin: 8px; border: 1px solid #888;
}

.box {
height: 80px;
margin-bottom: 8px;
background: #ddd;
}

注：twitterブートストラップcssが含まれています。

それが役に立てば幸い。

于 2012-11-11T12:56:07.573 に答える
1

このデモのように使用display: inline-block;する.navbar-inner

説明：を使用してdisplay: inline-block;も、ナビゲーションバーが以前使用していた余分なスペースは、水平方向にも垂直方向にも使用されません... :)

CSS

.navbar-inner {
   display: inline-block;
}

編集：ナビゲーションメニューをこのようにするよりも幅の100％にしたい場合

デモ2

CSS

.navbar-inner {
   overflow: hidden;
}
于 2012-11-11T10:59:08.777 に答える