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。我认为这些会对你有所帮助。