html - Bootstrap/网格系统/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>

参见 this对于您对 Grid System 的澄清，请参阅一些示例 Bootstrap Template .我认为这些会对您有所帮助。