3

典型的なTwitter Bootstrapの例 に示すように、サイドバー ナビゲーションがあります。

サイドバー メニュー項目の一部が長い。ウィンドウのサイズに応じて、ウィンドウの幅を変更すると、この jsfiddleに示すようにテキストが次の行に折り返されます。プレゼンテーションのために、サイドバー ナビゲーションの最小幅を設定したいと思います。Bootstrap の CSS にメディア タグがあることは知っていますが、それが必要かどうかはわかりません。基本的には、コンテンツ セクションの応答性を維持したまま、サイドバー メニューの幅を最小限に抑えたいと考えています (または、実際には幅を固定したほうがよい場合もあります)。

sidebarnav の幅を修正する方法はありますか?ただし、ページのコンテンツ セクションで適切に表示されるようにする方法はありますか?

4

1 に答える 1

5

からnav出てfluid-container、その位置をに設定し、コンテナにabsolute追加します。margin-leftこれはTwitterBootstrapのネイティブなポジショニング方法ではありませんが、機能するはずです。

マークアップ：

<div class="navbar navbar-fixed-top">...</div>
<div class="the-sidebar">...</div>
<div class="container-fluid the-container>...</div>

CSS：

.the-sidebar {
    position: absolute;
    width: 220px;
}
.the-container {
    margin-left: 240px;
}

これはjsfiddleのスクリプトです（私は最新バージョンのTwitter Bootstrapを使用しました）

ヒント：

常に表示されるサイドバーが必要な場合は、位置を次のように変更します。fixed

于 2012-08-27T07:22:37.710 に答える