2012-02-13 9 views
4

流体の中心と固定された面を持つ3列のレイアウトを作成しようとしています。ここにはjsfiddleがあります。 navのclearfixがサイドバーの下にメインコンテンツを押し込んでいるかのようです。 clearfixがなければ、コンテンツは一般的に間違って表示され始めます。誰でもこれを修正する方法を知っていますか?3つの列の流体レイアウトとtwitterのブートストラップ - clearfixesのばらつき

答えて

2

そうのように、適切にその境界内に含まれてinline-blockとしてあなた.nav-tabsのdivを定義します。

.nav-tabs { 
display: inline-block; 
width:100%; 
} 

デモ:http://jsfiddle.net/6vPqA/15/show/ 編集:http://jsfiddle.net/6vPqA/15/

編集:メニューがよりよく適応するように幅を追加しました。

+0

優れた答え。あなた自身の "left"と "right"クラスを宣言する代わりに、ブートストラップを "pull-left"と "pull-right"を使うことができることを覚えておいてください。 –

+0

これはなぜですか? –

+0

@JonathanOngブロックレベルの要素は、特定の幅と高さが指定されていない限り、境界内に含まれないためです。さもなければ彼らは彼らのコンテナが許す限り伸びます。 'display:inline-block'は要素が境界と余白内に収まるようにして、修正が適用される前に見た空きスペースを埋めることはありません。 –

1

navクラスの高さを指定すると、コンテンツがサイドバー間で引き上げられるようです。

のような何か:

.nav {height:50px} 
関連する問題