Html 类无边沟/对应CSS未消除列之间的间隙

我使用Bootstrap4在一行的两列中添加了一些图像。第一列和第二列之间有一个间隙，导致我的图像之间出现不必要的不均匀间距（如下所示）。我希望第二个和第三个图像之间的间距与第一个和第二个（以及第三个和第四个）之间的间距相同

我试着按照Bootstrap4中关于no-gutters类的说明，将其添加到row div以及下面的CSS中，但没有做任何事情（也许我应该做些改变？）

我也试过这个，但也没用：

.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>

作品

---

查看完整代码。

不需要排水沟，但现在的问题是对齐。您使用的是

文本中心

，它使图像集中在每个列中。解决方案是将所有图像放在同一个

列中

 <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>

第一个解决方案的完整代码：

正文{
边缘顶部：2米；
字体系列：“Raleway”，无衬线；
}
h1{
文本转换：大写；
}
琼伯伦先生{
文本对齐：居中；
}
img{
边缘：1米；
宽度：90%；
}
img.works{
高度：300px；
宽度：自动；
}
1.没有排水沟{
右边距：0；
左边距：0；
>上校，
>[类别*=“列-”]{
右边填充：0；
左侧填充：0；
}
}
大宗报价{
文本对齐：左对齐；
/*文本对齐：居中（应用于.jumbotron）要求元素内联或包含作为直接子后代的文本才能起作用。由于blockquote的文本位于块级元素内，因此将其设置为显示：内联块是一种解决方法。注意，显示上/下页边距还需要块*/
显示：内联块；
字体系列：佐治亚，衬线；
字体：斜体；
保证金：4em0；
填充：0.35em 2.5em；
线高：1.45；
位置：相对位置；
颜色：#383838；
}
blockquote p{
字体大小：1em！重要；
}
区块报价：之前{
显示：块；
左侧填充：10px；
内容：“\201C”；
字号：3em；
/*具有反向定位的元素相对于最近定位的祖先进行定位*/
位置：绝对位置；
/*从元素的包含块（元素相对定位的祖先）的边偏移*/
左：-3px；/*负数向左移动*/
顶部：-13px；/*负值将其移向顶部*/
颜色：#7a7a；
}
区块引用{
颜色：#999；
字体大小：14px；
边缘顶部：5px；
}
保险商实验室{
/*文本对齐：居中，应用于父jumbotron类，仅适用于内联元素；应用此选项可确保ul居中*/
显示：内联块；
文本对齐：左对齐；
/*底部设置为4em，以匹配blockquote创建的ul以上的保证金*/
边缘底部：4em；
列表样式：无；
}

大卫休谟
大卫休谟
哲学家、历史学家、经济学家和散文家
《大卫·休谟画像》，1754年，艾伦·拉姆齐著
一个智者根据证据来衡量自己的信仰

大卫休谟
大卫·休谟生活事件的简要时间表：



1711——出生于苏格兰爱丁堡的大卫之家
1713年父亲去世
＞1723 < <强> >报名参加爱丁堡大学12岁（14为典型）
1734——改姓休谟
1739——出版一本关于人性的专著的第一册和第二册
1748——发表一篇关于人类理解的调查报告
1751——发表一篇关于道德原则的调查报告
1776年去世，享年65岁

作品
做一个哲学家；但是，在你所有的哲学中，还是要做一个男人

大卫休谟
了解更多关于。

作者

我尝试从父div jumbotron中删除text center和text align:center，但仍然存在间隙。知道为什么吗？@NatalieCardot你不需要移动文本中心。。。您需要使图像的颜色与我在第一个示例中使用的颜色相同。。。或者像我在第二篇文章中所做的那样混合文本对齐是的，我同意第一篇文章的建议，它奏效了——谢谢！我拆下它们以确认对中是问题的原因。为了澄清这一点，在移除文本中心（以及CSS中的.jumbotron中的文本对齐：center）后，仍然存在间隙。@NatalieCardot是的，因为它没有将问题居中：）在我的回答中，我说这是对齐，就好像移除中心一样，它们将左对齐（默认设置），并且仍然存在间隙，因为它们位于单独的列中；）您可以使用对齐方式（左、中、右），您将看到它们都在移动，间隙将保持不变

<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>