流体の中心と固定された面を持つ3列のレイアウトを作成しようとしています。ここにはjsfiddleがあります。 navのclearfixがサイドバーの下にメインコンテンツを押し込んでいるかのようです。 clearfixがなければ、コンテンツは一般的に間違って表示され始めます。誰でもこれを修正する方法を知っていますか?3つの列の流体レイアウトとtwitterのブートストラップ - clearfixesのばらつき
4
A
答えて
2
そうのように、適切にその境界内に含まれてinline-block
としてあなた.nav-tabs
のdivを定義します。
.nav-tabs {
display: inline-block;
width:100%;
}
デモ:http://jsfiddle.net/6vPqA/15/show/ 編集:http://jsfiddle.net/6vPqA/15/
編集:メニューがよりよく適応するように幅を追加しました。
1
navクラスの高さを指定すると、コンテンツがサイドバー間で引き上げられるようです。
のような何か:
.nav {height:50px}
関連する問題
- 1. 3列の流体レイアウト
- 2. 3列流体スクロールセンターCSSレイアウト
- 3. ブートストラップ3のコンテナ流体とコンテナを持つグリッド
- 4. ブートストラップで3列流体レイアウトを作成するには?
- 5. ブートストラップ流体レイアウト - 固定幅のサイドバー
- 6. ブートストラップ.container流体は、ブートストラップに持つ
- 7. ブートストラップ4流体2列のフレックス列
- 8. アンドロイドの流体レイアウト
- 9. 3つのセクションに分割された1つの100%高さの列:2つの固定された流体と1つの流体
- 10. ブートストラップ流体のレイアウト小さな画面での保存率
- 11. TwitterのブートストラップCSS静的流体形位置決め
- 12. ブートストラップ流体コンテナ
- 13. ブートストラップ3左クローズバーコンテナ流体で高さ100%
- 14. 流体レイアウト保存レイアウト
- 15. CSS流体レイアウト
- 16. CSS流体レイアウトと画像
- 17. のCss流体レイアウトは
- 18. 流体CSSレイアウトの質問
- 19. CSS - 流体レイアウト上のテーブルレスメニューバー
- 20. ブートストラップ3 navbarのレイアウト
- 21. ブートストラップ:コンテナ流体と年カレンダー
- 22. ブートストラップnavbarコンテナとコンテナ流体の混合
- 23. ブートストラップ3中央の内容の流体容器
- 24. 流体CSSレイアウトを見つけようとしています
- 25. 固定列のCSS 3列液体レイアウト
- 26. ブートストラップは、コンテナ流体
- 27. Twitterのブートストラップ3.xセマンティックモバイルグリッド
- 28. Twitterのブートストラップ:span5またはspan4の2列のコンテナ流体をセンタリングすることは可能ですか?
- 29. CSSレイアウト - の3つの列、2つのボックス
- 30. CSSレイアウト2列固定流体
優れた答え。あなた自身の "left"と "right"クラスを宣言する代わりに、ブートストラップを "pull-left"と "pull-right"を使うことができることを覚えておいてください。 –
これはなぜですか? –
@JonathanOngブロックレベルの要素は、特定の幅と高さが指定されていない限り、境界内に含まれないためです。さもなければ彼らは彼らのコンテナが許す限り伸びます。 'display:inline-block'は要素が境界と余白内に収まるようにして、修正が適用される前に見た空きスペースを埋めることはありません。 –