1
divsをブートストラップに合わせるのに問題があります。真ん中の大きな区画が両側のボックスを押し下げている。このレイアウトはどのように達成できますか？divsとブートストラップを整列する方法
私が達成したいdiv要素のレイアウト：
A
答えて
0
私はこのコードで取り組んできた、それは何が必要かどう教えてください：
HTML：
<div class="row">
<div class="col-md-3">
<div class="row ">
<div class="col-md-12 medium">
</div>
</div>
<div class="row">
<div class="col-md-12 medium">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row ">
<div class="col-md-12 large">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row ">
<div class="col-md-12 small">
</div>
</div>
<div class="row">
<div class="col-md-12 small">
</div>
</div>
<div class="row">
<div class="col-md-12 small">
</div>
</div>
</div>
</div>
CSS：
.small{
height:100px;
border: 1px solid;
}
.medium{
height:200px;
border: 1px solid;
}
.large{
height:400px;
border: 1px solid;
}
希望すると助かります！
0
あなたが提供した画像に基づいて、私は以下のサンプルデザインを作成してそれを確認してください。あなたのデザインを達成するために、私は
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-3 col-xs-3" >
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:60px">
This is testing data
</div>
<div class="row" style="min-height:360px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
</div>
<div class="col-lg-5 col-sm-5 col-xs-5" style="min-height:620px;border:1px solid;margin-left:10px;margin-right:10px" >
This is center content
</div>
<div class="col-lg-3 col-sm-3 col-xs-3" >
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
</div>
</div>
</div>
</body>
</html>
0
は、三つの主要なdivを宣言し、場所の子供たちはそれにdivを同様にそれを確認してくださいいくつかのインラインCSSを書かれています。下の画像を確認してください。応答ステータス親100％の子供の側に並んで
+0
あなたの答えをありがとう：）も正しい！ – Procode
0
.border_black{
\t \t border: thin black solid
\t }
\t .margin_top_10px{
\t \t margin-top: 10px;
\t }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
\t <div class="row">
\t <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
\t \t <div class="row border_black">
\t \t <p>Left Side Contents 1</p>
\t \t </div>
\t \t <div class="row border_black margin_top_10px">
\t \t <p>Left Side Contents 2</p>
\t \t <p>Left Side Contents 2</p>
\t \t </div>
\t </div>
\t <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 center_div text-center">
\t \t <div class="row">
\t \t <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 border_black">
\t \t <p>Center Contents</p>
\t \t <p>Center Contents</p>
\t \t <p>Center Contents</p>
\t \t </div>
\t \t </div>
\t </div>
\t <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
\t \t <div class="row border_black">Right Side Contents 1</div>
\t \t <div class="row border_black margin_top_10px">Right Side Contents 2</div>
\t \t <div class="row border_black margin_top_10px">Right Side Contents 3</div>
\t \t
\t </div> \t
\t </div>
\t </div>ここJSFiddle
でこの情報がお役に立てば幸いです。
関連する問題
- 1. ブートストラップの行を整列する方法
- 2. divstと行をブートストラップと整列する方法
- 3. 複数のdivsを整列する
- 4. ネストされたDivsとH2の整列
- 5. ブートストラップの列内のコントロールを整列する方法は？
- 6. divの途中でブートストラップ列を整列する方法は？
- 7. このようなブートストラップ列を整列する方法
- 8. ブートストラップDivs Floatを列の隣に配置
- 9. ブートストラップのフロートdivs
- 10. センタリングdivs - ブートストラップ
- 11. ボタンをブートストラップと縦に整列する
- 12. ブートストラップと要素の整列
- 13. ブートストラップでLIクラスを正しく整列する方法は？
- 14. ブートストラップ4でフォームを垂直に整列する方法
- 15. ブートストラップでこの構造を整列する方法
- 16. 2列グリッドの長いテキストコンテンツをブートストラップと整列させる方法は？
- 17. 画面が小さくなるとdivsを重ねる方法は？ブートストラップ
- 18. さまざまなサイズのテキストをブートストラップと垂直に整列する方法
- 19. ブートストラップを使用してモバイルナビバーをロゴと整列させる方法
- 20. ブートストラップ4垂直整列列
- 21. ブートストラップでの列の整列
- 22. tablerowとテキストビューを整列する方法
- 23. ブートストラップ4の垂直方向の整列
- 24. テキストの縦方向の整列 - ブートストラップ
- 25. ブートストラップ縦方向の整列イメージ
- 26. ブートストラップ使用時のDivsレイアウト
- 27. Twitterのブートストラップでフォームフィールドを整列する
- 28. レスポンシブデザインで2 divsを垂直に整列する
- 29. 垂直方向と水平方向のブートストラップ行を整列するページ
- 30. ブートストラップ - ドロップダウンメニューのアイコンとテキストの整列
現在のコードはどのように見えますか？ – nehalist
3つのメインdivを宣言し、その中にchildren divを配置します。下の画像を確認してください –