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。

因此，为了正确显示您的图像......您应该为已经拥有该类的每个图像父级添加类col-xs-4或6：

希望它有所帮助。

Answer 2

从bootstrap文档中，尝试

{{1}}

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

小型设备上的Bootstrap网格对齐

2 个答案: