Boostrap/Grid System/CSS解決方法

Question

有沒有辦法通過Bootstrap 3 Grid系統來實現這種盒/圖像定位？如果不是，你認爲如何在純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> 

爲您澄清Grid System見this，看到一些例子Bootstrap Template。我認爲這些會對你有所幫助。