Question

我有一个正方形网格，如何指定第一列和第二列之间的空白分隔符间距？现在，它们似乎相距甚远，我希望能够指定第一列和第二列之间的尺寸，但要使图片保持正方形。请参阅下面图片链接中的绿色箭头。能够指定行分隔符度量也很好谢谢，

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
	<html>
	<head>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width">
	  <title>JS Bin</title>
	</head>
	<body>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



	<div class="container">
	  <div class="row">
		<div class="col-6 justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image"></div>
		<div class="col-6 justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"></div>
		
		<div class="col-6 justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png"></div>
		<div class="col-6 justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn"></div>
	  </div>
	</div>
	</body>
	</html>

enter image description here

有关问题 HTML Create an Equal Size Square Grid Picture System

Answer 1

为此，您应该覆盖col-6类并根据需要更改填充。

建议添加其他类来调整填充，而不是编辑col-6类。

col-6在引导程序中默认设置为

padding-left: 15px;
padding-right: 15px;

我添加了样式为{的类nopadding

.col-6.nopadding{ 
   padding: 0;
}

如果要删除图像和边框之间的空间，还应删除img的填充。幸运的是，它具有类img-thumbnail，因此您需要添加：

.nopadding .img-thumbnail { 
padding: 0;
}

查看最终结果：

.col-6.nopadding{ 
padding: 0;
}

.nopadding .img-thumbnail { 
  padding: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<div class="container">
  <div class="row">
    <div class="col-6 nopadding justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image"></div>
    <div class="col-6 nopadding justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"></div>

    <div class="col-6 nopadding justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png"></div>
    <div class="col-6 nopadding justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn"></div>
  </div>
</div>
</body>
</html>

HTML在方格图片中指定分隔线间隙测量

1 个答案: