我使用 Bootstrap 4 在单行的两列中添加了一些图像。第一列和第二列之间存在间隙，导致我的图像之间出现不需要的不均匀间距(如下所示)。我希望第二张和第三张图片之间的间距与第一张和第二张(以及第三张和第四张)之间的间距相同。
我尝试按照 Bootstrap 4 上的说明进行操作 documentation对于 no-gutters 类，将它添加到行 div 以及以下 CSS，它没有做任何事情(也许我应该改变一些东西？):
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
我也试过(如 suggested elsewhere )这个，它也什么也没做:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
此外，这是相关的 HTML:
<div class="card">
<div class="card-header">
<h3 class="text-center">Works</h3>
</div>
<div class="card-body">
<!-- Class no-gutters removes gutters (gaps) between column content -->
<div class="row text-center no-gutters">
<!-- Using two col classes; Bootstrap automatically creates two equal-width columns for all devices -->
<div class="col">
<img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">
<img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
</div>
<div class="col">
<img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">
<img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
</div>
</div>
</div>
</div>
查看CodePen完整代码。
最佳答案
no-gutters 是必要的，但现在的问题是对齐。您正在使用 text-center 使图像在每个列中居中。一种解决方案是将所有图像放在同一个 col
<div class="row text-center no-gutters">
<div class="col">
<img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">
<img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
<img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">
<img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
</div>
</div>
或者更改每个列的文本对齐方式，但您需要在小型设备上重新调整它:
<div class="row no-gutters">
<div class="col text-right">
<img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">
<img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
</div>
<div class="col text-left">
<img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">
<img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
</div>
</div>
第一个解决方案的完整代码:
body {
margin-top: 2em;
font-family: "Raleway", sans-serif;
}
h1 {
text-transform: uppercase;
}
.jumbotron {
text-align: center;
}
img {
margin: 1em;
width: 90%;
}
img.works {
height: 300px;
width: auto;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
blockquote {
text-align: left;
/* text-align: center (applied to .jumbotron) requires an element to be inline or contain text as direct child descendant to be functional. Since blockquote's text is inside block-level elements <p> and <footer>, setting it to display: inline-block is a workaround. Note also block is needed for top/bottom margins to appear */
display: inline-block;
font-family: Georgia, serif;
font-style: italic;
margin: 4em 0;
padding: 0.35em 2.5em;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote p {
font-size: 1em !important;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 3em;
/* Element with abolute positioning is positioned relative to nearest positioned ancestor */
position: absolute;
/* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
left: -3px; /* Negative moves it left */
top: -13px; /* Negative moves it toward top */
color: #7a7a7a;
}
blockquote cite {
color: #999;
font-size: 14px;
margin-top: 5px;
}
ul {
/* text-align: center, applied to parent jumbotron class, only works on inline elements; applying this ensures ul is centered */
display: inline-block;
text-align: left;
/* Bottom set to 4em to match margin above ul created by blockquote */
margin-bottom: 4em;
list-style: none;
}<html lang="en">
<head>
<meta charset="UTF-8">
<title>David Hume</title>
<!-- Ensures proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Provides a responsive, fixed-width container. Needed as outermost wrapper in order for Bootstrap grid system to work correctly -->
<div class="container">
<!-- Big grey box for calling extra attention to content -->
<div class="jumbotron">
<div class="row">
<!-- Using a single col in a row, Bootstrap automatically creates a single column (works for all devices) -->
<div class="col">
<h1>David Hume</h1>
<h6>Philosopher, Historian, Economist, and Essayist</h6>
<div class="card">
<div class="card-body">
<img src="https://cdn.theatlantic.com/assets/media/img/2015/09/03/BOB_Essay_Opener_WEBCrop/1920.jpg?1441298243" alt="Portrait of David Hume">
<div class="caption text-secondary">"Portrait of David Hume," 1754, by Allan Ramsay</div>
</div>
</div>
<blockquote>
<p>A wise man proportions his belief to the evidence.</p>
<footer class="blockquote-footer"><cite>David Hume</cite></footer>
</blockquote>
<h6>A brief timeline in events of David Hume's life:</h6>
<br>
<ul>
<li><strong>1711</strong> – Born as David Home in Edinburgh, Scotland</li>
<li><strong>1713</strong> – Father dies</li>
<li><strong>1723</strong> – Enrolls at University of Edinburgh at the age of 12 (14 was typical)</li>
<li><strong>1734</strong> – Changes surname to Hume</li>
<li><strong>1739</strong> – Publishes Books 1 and 2 of <em>A Treatise on Human Nature</em></li>
<li><strong>1748</strong> – Publishes <em>An Enquiry Concerning Human Understanding</em></li>
<li><strong>1751</strong> – Publishes <em>An Enquiry Concerning the Principles of Morals</em></li>
<li><strong>1776</strong> – Dies at the age of 65</li>
</ul>
</div>
</div> <!-- End of row div -->
<div class="card">
<div class="card-header">
<h3 class="text-center">Works</h3>
</div>
<div class="card-body">
<!-- Class no-gutters removes gutters (gaps) between column content -->
<div class="row text-center no-gutters">
<!-- Using two col classes; Bootstrap automatically creates two equal-width columns for all devices -->
<div class="col">
<img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">
<img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
<img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">
<img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<blockquote>
<p>Be a philosopher; but, amidst all your philosophy, be still a man.</p>
<footer class="blockquote-footer"><cite>David Hume</cite></footer>
</blockquote>
<h6>Learn more on <a href="https://en.wikipedia.org/wiki/David_Hume" target="_blank">Wikipedia</a>.</h6>
</div>
</div>
</div> <!-- End of jumbotron div -->
</div> <!-- End of container div -->
<footer class="text-center">
<hr>
<p>Written and coded by <a href="https://www.linkedin.com/in/natalie-cardot/" target="_blank">Natalie Cardot</a></p>
</footer>
</body>
</html>关于html - 类 no-gutter/相应的 CSS 不消除列之间的间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49825892/