私は自分のニーズに合わせてグリッドを修正する方法を理解しようとしていますが、私は気が狂っています。私の英語は申し訳ありません - スクリーンショットを見てください。他のグリッド要素を押し下げた縦の列//ブートストラップ3
答えて
その非常に簡単、あなたが必要なものすべては、ロゴラッパーは十分な大きさになるようにすることです。 .clearfix
クラスのdivを使用することも、CSSを使用して高さを適用することもできます。ここではあなたが試したコードを投稿できる例
http://codepen.io/anon/pen/MyGKEL
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#logo img {
width: 100%;
height: auto;
}
#sidebar {
border: 1px solid black;
clear: both;
float: left;
}
#logo {
padding: 10px 0
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" id="logo">
<img src="http://dummyimage.com/200x400" width="100%" />
</div>
<div class="col-md-2 bullet">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
<div class="col-md-2 bullet">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
<div class="col-md-2 bullet">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
<div class="col-md-4" id="phone">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
<div class="col-md-10" id="nav">
<nav class="navbar navbar-default navbar-static-top">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<div class="col-md-9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo aLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut
</div>
</div>
<div class="col-md-2" id="sidebar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
</div>
</div>
</div>
</body>
</html>
ありがとうございます。試してみます!あなたはこのことについてどう思いますか? https://jsfiddle.net/kindsage/e7L6Lc1n/サイドバーをLOGO divの下に追加する方法は? –
ロゴラッパーの下で固定高さとサイドバーでどのように動作しているかをチェックできるように、コードを更新しました。 – Ganga
私は参照してください。これは主な問題です - ロゴは固定されていませんheigh –
- 1. ブートストラップ3 |列の内容は他の列を押し下げます
- 2. コンテンツエリアの拡大中に他の要素を押し下げる
- 3. 他のオプションを押し下げる縦型ドロップダウンメニュー?
- 4. インラインブロックのミスアライメント(他の要素が押し下げられる)
- 5. ロングラップフレックスアイテム他を押し下げる
- 6. ブートストラップ4:コンテンツを押し下げるのを止める
- 7. ブートストラップ3は、div要素が他の要素
- 8. Javascript - 一番上の固定バーを追加して他のすべての要素を押し下げます
- 9. ブートストラップ3.0 - 要素を下に押し込む
- 10. JQuery UIスライドが要素を押し下げ、他の解決策が動作しないように見える
- 11. HTML5:左の「表示:テーブル・セル」の画像要素は、右の要素にコンテンツを押し下げ
- 12. ブートストラップ3グリッド
- 13. html要素押下ボタン
- 14. ブートストラップ3ボタン/ラベルなしのテキストボックスの縦の整列
- 15. ブートストラップ検証メッセージが残りのフォームを押し下げています
- 16. glut - キーを押し下げる
- 17. ボタンをクリック、押し下げ、リリースする
- 18. ブートストラップポップアップがボタンを押し下げる
- 19. 他の要素の子要素の下に要素を描画します
- 20. ブートストラップ列の要素を一番下に揃える方法は?
- 21. 縦型の整列ブートストラップ
- 22. 縦の中央にあるブートストラップ3ボタン
- 23. html電子メールテンプレートが配列を押し下げる
- 24. 2列のブートストラップ要素?
- 25. ブートストラップと要素の整列
- 26. グリッド行を隠している他の要素
- 27. リサイズは、他の人が見えない時に縦に押し上げるコントロールを調整
- 28. ブートストラップ3のフォーム要素を並べて組み合わせた
- 29. スライドインメニューで他の要素を押しています
- 30. 他の要素の下にある要素のクリックを登録します。
働いていますか? –
はい、もちろんです。これは私のグリッドの簡単なバージョンです - [リンク](https://jsfiddle.net/kindsage/7omn0hpf/) –
あなたの質問から言うのは難しいですが、私はあなたが行のすべての列が同じ高さ。もしそうなら、この質問への答えをチェックしてください:http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – sean