只是感觉是否可以通过任何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>
当我最小化屏幕以检查其移动兼容性时,它看起来像这样,但是看起来很丑陋,因为每行中的两个图像都像这样合并,我觉得如果两个图像之间有小的填充会更好,有什么帮助吗?
最佳答案
据我了解,您还需要指定不同设备的类(平板电脑和手机的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/