ブートストラップ用のグリッドレイアウト

Question

私は自分のカラムを特定の方法でスタイリングしています。私は、2つの列にはそれぞれ同じサイズの2つの列が含まれています。

A B C D

私はそれの隣の両方の行を含むより長い列を追加することになっています。

A B E C D E

Eは、両方の行の等しい長さを有します。私は2つのdivを分けて、それぞれの対応する辺に浮かせて無駄にしようとしました。 マイコード：

.announcements{ 
 
\t width: 300px; 
 
\t height: 500px; 
 
\t background: #FFFFFF; 
 
\t box-shadow: 0 4px 4px 0 rgba(0,0,0,0.08); 
 
\t float: right; 
 
} 
 

 
.btn-links{ 
 
\t width: 300px; 
 
\t height: 160px; 
 
\t background: #FFFFFF; 
 
\t box-shadow: 0 4px 4px 0 rgba(0,0,0,0.08); 
 
\t border-radius: 5px; 
 
}

<div class="container-fluid bg-content"> 
 
     <div class="content"> 
 
     <div class="content-heading"> 
 
      <h1> Welcome, </h1> <!--Name of user--> 
 
      <h4> What do you want to do today? </h4> 
 
     </div> 
 
     <div class="quick-links"> 
 
      <div class="row"> 
 
      <div class="col-md-4"> 
 
       <button class="btn-links"></button> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <button class="btn-links"></button> 
 
      </div> 
 
      <div class="panel announcements"> 
 
      </div> 
 
      </div> 
 
      <div class="row"> 
 
      <div class="col-md-4"> 
 
       <button class="btn-links"></button> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <button class="btn-links"></button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

ただし、このコードが生成：

ABCD Eは、右の長い列され、長方形の箱であること。どのように私はこれを修正することができます私たちはより多くの四角形のボックスを左側に置くことができ、右側のパネルは横に浮かんだままですか？前もって感謝します。

Answer 1

あなたが望むものはthis fiddleで確認できますが、ウィンドウの大きさが4/12のmdサイズが右側に収まっていることを確認してください。それ以外の場合は応答性が低下します。 小さいサイズの場合は右にしておきたい場合は、col-md ...をcol-sm ...に置き換えるか、col-sm ...を追加します。

<div class="container-fluid bg-content"> 
    <div class="content"> 
    <div class="content-heading"> 
     <h1> Welcome, </h1> <!--Name of user--> 
     <h4> What do you want to do today? </h4> 
    </div> 
    <div class="quick-links"> 
     <div class="row"> 
     <div class="col-md-8"> 
      <div class="col-md-6"> 
      <button class="btn-links"></button> 
      </div> 
      <div class="col-md-6"> 
      <button class="btn-links"></button> 
      </div> 
      <div class="col-md-6"> 
      <button class="btn-links"></button> 
      </div> 
      <div class="col-md-6"> 
      <button class="btn-links"></button> 
      </div> 
     </div> 
     <div class="col-md-4 panel announcements"> 
     hello there 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

あなたは外から出ています。まず、1つのdivが行の8/12であり、もう1つのdivがパネルアナウンスの4/12です。次に、最初の8/12のdivの中に2つの行があり、それぞれに2つのdivがあり、それぞれに6/12のスペースがあります。