HTML 指定方形网格图片中的分隔线间隙测量 | col
本文介绍了HTML 指定方形网格图片中的分隔线间隙测量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述 我有一个方形网格，如何指定第一列和第二列之间的空白分隔线间隙?现在它们似乎相距很远，我希望能够在第一列和第二列之间指定测量值，但将图片保持为方形.请参阅下面图片链接中的绿色箭头.能够指定行分隔器测量也很好谢谢，
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="样式表"/><!DOCTYPE html><头><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title><身体><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9TwMcrossorigin="匿名"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQd1HsFuji="cross"<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+jRMB"cross/脚本><div class="容器"><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>
与问题有关HTML 创建等大小的方形网格图片系统
解决方案
要做到这一点，您应该覆盖 col-6 类并根据需要更改填充.
建议添加其他类来调整填充，而不是编辑col-6类.
col-6 在 bootstrap 中默认设置为
padding-left: 15px;padding-right: 15px;我添加了带有样式的 nopadding 类:
.col-6.nopadding{填充:0；}如果要去掉图片和边框之间的空格，也要去掉img的padding.幸运的是它有 img-thumbnail 类，所以你要添加:
.nopadding .img-thumbnail {填充:0；}查看最终结果:
.col-6.nopadding{填充:0；}.nopadding .img-缩略图{填充:0；}<头><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title><身体><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9TwMcrossorigin="匿名"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQd1HsFuji="cross"<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+jRMB"cross/脚本><div class="容器"><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>
</html>
I have a square grid, how do I specify the white space divider gap between First Column and Second Column? Right now they seem to far apart, I would like to be able to specify measurements between first column and second column, but keep the pictures in a square shape.see green arrow in picture link below. being able to specify row divider measurement would also be niceThanks,
<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>
Related to questionHTML Create an Equal Size Square Grid Picture System
解决方案
to do this you should override col-6 class and change the padding as you want.
It's recommended to add other class to adjust padding rather than editing col-6 class.
col-6 set by default in bootstrap to
padding-left: 15px;
padding-right: 15px;
I've added class nopadding with style:
.col-6.nopadding{
padding: 0;
}
If you want to remove the space between image and border, you would also remove the padding of img. Fortunately it has class img-thumbnail so you'd add:
.nopadding .img-thumbnail {
padding: 0;
}
See the final result:
.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 指定方形网格图片中的分隔线间隙测量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
10-30 08:12