流体の中心と固定された面を持つ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. ブートストラップ流体レイアウト - 固定幅のサイドバー
- 5. ブートストラップ4流体2列のフレックス列
- 6. 3つのセクションに分割された1つの100%高さの列:2つの固定された流体と1つの流体
- 7. アンドロイドの流体レイアウト
- 8. ブートストラップ流体のレイアウト小さな画面での保存率
- 9. TwitterのブートストラップCSS静的流体形位置決め
- 10. ブートストラップ3中央の内容の流体容器
- 11. 流体レイアウト保存レイアウト
- 12. CSS流体レイアウト
- 13. CSS流体レイアウトと画像
- 14. のCss流体レイアウトは
- 15. 流体CSSレイアウトの質問
- 16. CSS - 流体レイアウト上のテーブルレスメニューバー
- 17. Twitterのブートストラップ3.xセマンティックモバイルグリッド
- 18. 流体CSSレイアウトを見つけようとしています
- 19. 固定列のCSS 3列液体レイアウト
- 20. Twitterのブートストラップ:span5またはspan4の2列のコンテナ流体をセンタリングすることは可能ですか?
- 21. CSSレイアウト2列固定流体
- 22. CSSヘルプ - 3列、2流体、1固定
- 23. 流体のヘッダーを含むアンドロイドのレイアウト
- 24. CSSの流体レイアウトの質問
- 25. CSS holy grail - 2つの固定/ 1流体列の問題
- 26. ブートストラップ:流体レイアウトの溝幅が固定されていますか?
- 27. 3カラム流体CSS
- 28. 2列のdivレイアウト:右のカラム固定幅、左流体、私は左の流体幅を有し、右の幅を固定している2つの列2つのdivとレイアウトをしたい互いに
- 29. jQuery Masonry - 流体レイアウトの問題
- 30. CSS:特殊な流体レイアウトの問題
優れた答え。あなた自身の "left"と "right"クラスを宣言する代わりに、ブートストラップを "pull-left"と "pull-right"を使うことができることを覚えておいてください。 –
これはなぜですか? –
@JonathanOngブロックレベルの要素は、特定の幅と高さが指定されていない限り、境界内に含まれないためです。さもなければ彼らは彼らのコンテナが許す限り伸びます。 'display:inline-block'は要素が境界と余白内に収まるようにして、修正が適用される前に見た空きスペースを埋めることはありません。 –