ブートストラップを使ってこの画像のように行うには？

Question

どのようにこの画像のようにブートストラップですか？

これは私のコードです。このコードで間違いがありましたら、私に手伝ってください。

<div class="row"> 
    <div class="img-5"> 
     <div class="col-md-4"> 
      <div class="hn-img-1"> 
       <img src="img/1.jpg" alt=""> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="hn-img-1"> 
       <img src="img/2.jpg" alt=""> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="hn-img-1"> 
       <img src="img/3.jpg" alt=""> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="hn-img-1"> 
       img src="img/5.jpg" alt=""> 
       </div> 
      </div> 
      <div class="col-md-4"> 
      <div class="hn-img-1"> 
       <img src="img/4.jpg" alt="" class="mt-top"> 
      </div> 
      </div> 
    </div> 
</div> 

と結果がこれです、

これは私のコードの結果です。あなたはので、あなたがCOL-SM- *またはCOL-MD-のようなクラスを使用してグリッドになりたいものだけを使用する必要がありROWの下で削除する必要があります* の下

Answer 1

ネストした行を使用して、必要に応じて構造を作成することができます。これは、あなたが望むデザインに導くことができるサンプルコードです。

<div class="row"> 
    <div class="col-md-4"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="well">2</div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="well">4</div> 
      </div> 

     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="well">1 
      <br/> 
      <br/> 
      <br/> 
      <br/> 
      <br/> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="well">2</div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="well">4</div> 
      </div> 

     </div> 
    </div> 
</div> 

JSFIDDLE

Answer 2

あなたはまた、ヨーヨー持っていますグリッドの現在のdivの前に空のスペースが必要な場合は、.col-md-offset- *などのクラスを使用します。

Answer 3

ブートストラップでは、画面を12列に分割しているため、3列の列がmd-4yだけ1列になっています。そして最初の列には2つの画像を、中央の列には大きな画像を、最後の列には残りの2つの画像を入れます。

Answer 4

ブートストラップ12カラム・グリッド・システムを有しています。だから、グリッドの合計が12

間違いであることを出てくるような方法であなたのグリッドを分割する必要があります。あなたは4つのグリッドごとに5 DIV col-md-4を使用しています。つまり、グリッドの合計が20になることを意味します。ただし、12にする必要があります。グリッドの合計が12を超える場合は、（col-sm-*を使用して）うまくいく場合があります。ただし、12グリッドシステムを使用することを強くお勧めします。

それでは、あなたがすべきことは次のとおりです。

1. の代わりに、5 col-md-4を使ってあなただけの3 col-md-4（グリッドの総和= 12）を使用する必要があります。
2. 最初のdiv（Left div）に2画像、2番目のdiv（中央div）に1画像、3 div（Right div）に2画像を置く必要があります。

これはトリックを行う必要があります。ここにはJSFiddle demoがあります。 （mdは中位のデバイスを表しているので、我々の列のdiv要素と通信しているのは、利用可能なスクリーンスペースが "medium device"（992px以上）以上の場合、これらの要素の幅を補正して列に一致させるJSFiddleの出力ウィンドウが最大幅であることを確認してください。結果が表示されない場合は、すべての画像が重なって表示されます）

問題がある場合はお知らせください。 。

Answer 5

この画像を見て、グリッドに関する基本知識を持ってください。グリッドレイアウトを使用して、必要に応じてページを配布します。私は理解していない