ブーストラップ/グリッドシステム/ CSS回避策

Question

ブートストラップ3グリッドシステムを使用して、この種のボックス/イメージ位置決めを行う方法はありますか？そうでない場合は、これをプレーンなCSSでどのようにコードすると思いますか？

ピクチャ参照のためのリンクをクリックしてください： Box Image

を誰かが私を助けることができる方法は？

Answer 1

Bootstrap Grid Systemで可能です。私はこのコードがあなたを助けると思う。私は全画面でそれをした、あなたの画面の一部のセクションに使用することができます。

<div class="row"> 
    <div class="col-md-6"> 
     <p>Some text..</p> 
     <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 

    <div class="col-md-3"> 
     <p>Some text..</p> 
     <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> 

     <p>Some text..</p> 
     <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 

    <div class="col-md-3"> 
     <p>Some text..</p> 
     <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 
</div> 



<div class="row"> 
    <div class="col-md-3"> 
     <p>Some text..</p> 
     <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> 

     <p>Some text..</p> 
     <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 


    <div class="col-md-6"> 

     <div class="col-md-6"> 
     <p>Some text..</p> 
     <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 

    <div class="col-md-6"> 
     <p>Some text..</p> 
     <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 

     <p>Some text..</p> 
     <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 


    <div class="col-md-3"> 
     <p>Some text..</p> 
     <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> 

     <p>Some text..</p> 
     <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 
</div> 

あなたの明確化のためthisについてGrid Systemを参照し、いくつかの例Bootstrap Templateを参照してください。私はこれらがあなたを助けると思う。