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

我有一排带有Col -8和Col -4的行,Col -4包含以下4个网格图像,其中又有两行

html - 小型设备上的Bootstrap Grid对齐-LMLPHP

<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>


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

html - 小型设备上的Bootstrap Grid对齐-LMLPHP

最佳答案

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

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

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

希望能帮助到你。

关于html - 小型设备上的Bootstrap Grid对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34948274/

10-12 12:32
查看更多