小型设备上的Bootstrap Grid对齐

Question

只是感觉是否可以通过任何CSS调整来解决此问题。

我在其中有Col -8和Col -4的行，Col -4包含以下4个网格图像，其中又有两行

<div class="col-md-4">
  <div class="row">
    <div class="col-md-6">
      <div class="four">
        <img src="images/home/client1.png" style="width:100% ; height:160px" alt="Devegowda">

        <div class="four-overlay top">
          <p style="font-weight: bold">HD Devegowda</p>
          <br /> Former Prime Minister of India (1996)
          <br />
          <a class="button_example" href="#">Read</a>
        </div>
      </div>
      <!-- <br />-->
    </div>

    <div class="col-md-6">
      <div class="four">
        <img src="images/home/client1.png" style="width:100% ; height:160px" alt="Devegowda">

        <div class="four-overlay top">
          <p style="font-weight: bold">HD Bhawani</p>
          <br /> Former Prime Minister of India (1996)
          <br />
          <a class="button_example" href="#">Read</a>
        </div>
      </div>
    </div>

  </div>
  <br />
  <div class="row">
    <div class="col-md-6">
      <div class="four">
        <img src="images/home/client1.png" style="width:100% ; height:160px" alt="Devegowda">

        <div class="four-overlay top">
          <p style="font-weight: bold">HD Revanna</p>
          <br /> Former Prime Minister of India (1996)
          <br />
          <a class="button_example" href="#">Read</a>

        </div>
      </div>
      <!-- <br />-->
    </div>
    <div class="col-md-6">
      <div class="four">
        <img src="images/home/client1.png" style="width:100% ; height:160px" alt="Devegowda">

        <div class="four-overlay top">
          <p style="font-weight: bold">HD Kumaraswamy</p>
          <br /> Former Prime Minister of India (1996)
          <br />
          <a class="button_example" href="#">Read</a>
        </div>
      </div>
    </div>
  </div>
</div>

当我最小化屏幕以检查其移动兼容性时，它看起来像这样，但是看起来很丑陋，因为每行中的两个图像都像这样合并，如果在这两个图像之间有一个小的填充，我觉得这会好得多，有帮助吗？

Answer 1

据我了解，您还需要指定不同设备的类（平板电脑和手机的col-sm-X和col-xs-X）。

如果您不愿意这样做，则无论其大小如何，COL-MD都将等于COL-XS-12。

因此，为了正确显示图像...，应为每个已经具有class col-md-6的图像父级添加class col-xs-4或6。

希望能帮助到你。

Answer 2

从引导文档中，尝试

<img src="..." class="img-responsive" alt="Responsive image">

http://getbootstrap.com/css/#images