divsとブートストラップを整列する方法

divsをブートストラップに合わせるのに問題があります。真ん中の大きな区画が両側のボックスを押し下げている。このレイアウトはどのように達成できますか？divsとブートストラップを整列する方法

私が達成したいdiv要素のレイアウト：

2016-12-28 Procode

現在のコードはどのように見えますか？ – nehalist

3つのメインdivを宣言し、その中にchildren divを配置します。下の画像を確認してください –

私はこのコードで取り組んできた、それは何が必要かどう教えてください：

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; 
}

希望すると助かります！

出典

2016-12-28 11:03:45 avilac

ありがとうございます、魅力のように動作します。単純なネストされたdiv： – Procode

あなたを歓迎します;） – avilac

私はこのようなsm（540px）のボックスを持っていたいと思っています。 ------ sm-12 --------
------このように、左の2つのボックス、非表示、中間のボックスcol-sm-12、 sm3 - sm3 - sm3 これは私のために働いていません：/ – Procode

あなたが提供した画像に基づいて、私は以下のサンプルデザインを作成してそれを確認してください。あなたのデザインを達成するために、私は

<!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>

出典

2016-12-28 11:04:03

は、三つの主要なdivを宣言し、場所の子供たちはそれにdivを同様にそれを確認してくださいいくつかのインラインCSSを書かれています。下の画像を確認してください。応答ステータス親100％の子供の側に並んで

https://i.stack.imgur.com/1qTPG.png

出典

2016-12-28 11:06:01

あなたの答えをありがとう：）も正しい！ – Procode

.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

でこの情報がお役に立てば幸いです。

出典

2016-12-28 12:00:52

divsとブートストラップを整列する方法

答えて

関連する問題