时间戳

首页 > 解决方案 > 创建图像网格 - bootstrap4

html - 创建图像网格 - bootstrap4

问题描述

我正在尝试创建一个图像网格，列之间的空间很小，等于下图：

网格

问题是我无法制作右边距（红线），下图显示了问题：

在此处输入图像描述

JSfiddle：https ://jsfiddle.net/castordida/0zy7qd5m/ 

<div class="container gridhome mt-5 mb-5 p-0">
	<div class="row" style="height:469px;">
		<div class="col-sm-8 h-100" style="background-color:#000;">
			<span class="categoria"><a href="#1">test</a></span>
			<h3>TESTE</h3>
			<a href="#" class="inteira"></a>
		</div>
		<div class="col-sm-4 h-100 p-0">
			<div class="col-sm-12 h-50 p-0">
				<div class="h-100 ml-1" style="background-color:#919191;">
					<span class="categoria"><a href="#">test</a></span>
					<h3>TESTE</h3>
				</div>
				<a href="#" class="inteira"></a>
			</div>
			<div class="col-sm-12 h-50 p-0">
				<div class="h-100 ml-1 mt-1" style="background-color:#919191;">
					<span class="categoria"><a href="#">test</a></span>
					<h3>TESTE</h3>
				</div>
				<a href="#" class="inteira"></a>
			</div>
		</div>
	</div>
	<div class="row mt-1" style="height:234.5px;">
		<div class="col-sm-4 h-100 p-0">
			<div class="h-100" style="background-color:#919191;">
				<span class="categoria"><a href="#1">test</a></span>
				<h3>TESTE</h3>
				<a href="#" class="inteira"></a>
			</div>
		</div>
		<div class="col-sm-4 h-100 p-0">
			<div class="h-100 ml-1" style="background-color:#919191;">
				<span class="categoria"><a href="#">test</a></span>
				<h3>TESTE</h3>
				<a href="#" class="inteira"></a>
			</div>
		</div>
		<div class="col-sm-4 h-100 p-0">
			<div class="h-100 ml-1" style="background-color:#919191;">
				<span class="categoria"><a href="#">test</a></span>
				<h3>TESTE</h3>
				<a href="#" class="inteira"></a>
			</div>
		</div>
	</div>
</div>

标签： htmlcssbootstrap-4css-grid

解决方案

好吧，这是因为你的照片在右边有一个间隙......但是固定的高度没有提到它......

有很多方法可以纠正这个...

首先：https ://jsfiddle.net/y0x7kpza/

添加一个溢出：隐藏到第一个 .row

第二：https ://jsfiddle.net/d0a52xwk/

重新影响右侧两个 div 的高度，以处理这些元素的 margin-top。

.h-50-bis{
  height:calc(50% - 0.125rem);
}

推荐阅读