Question

有没有办法通过Bootstrap 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>

有关Grid System的说明，请参阅this，并查看示例Bootstrap Template。我认为这些会对你有帮助。

Boostrap /网格系统/ CSS解决方法

1 个答案: