如何使用Bootstrap缩小两个div row容器间的间距？

首先，你之前尝试的.container样式没生效的原因很简单：你的HTML里的容器用的是id="container"，但CSS里写的是类选择器.container，两者不匹配，所以样式根本没作用在目标元素上。不过就算匹配上了，调整container的padding也解决不了两个col之间的间距问题——因为Bootstrap的列间距（gutter）是由row的负margin和col的左右padding共同控制的。

下面给你几种简单有效的解决方案：

方法1：使用Bootstrap内置的gutter类（推荐） #

如果你用的是Bootstrap 4.4+或者Bootstrap 5，直接给包裹列的row添加g-*类就能快速调整间距，数值越小间距越小：

<div id="container">
 <div class="row g-2"> <!-- 这里添加g-2，你可以根据需要改成g-1、g-0等 -->
  <div class="col-lg-6">
   <a href="data_science_projects/Fatal_Police_Shootings_in_the_US.html"><img src="images/DS.jpg" class="rounded mx-auto d-block" alt="Responsive image" width="300px"></a>
   <br>
   <h6 class="text-center text-black"> Fatal Police Shootings in US </h6>
  </div>
  <div class="col-lg-6">
   <a href="data_science_projects/Fatal_Police_Shootings_in_the_US.html"><img src="images/DS.jpg" class="rounded mx-auto d-block" alt="Responsive image" width="300px"></a>
   <br>
   <h6 class="text-center text-black"> Fatal Police Shootings in US </h6>
  </div>
 </div>
</div>

g-0是完全移除间距，g-1到g-5是从小到大的间距，你可以根据视觉效果调整。

方法2：自定义列的内边距 #

如果你的Bootstrap版本比较旧，不支持gutter类，可以给两个col-lg-6添加自定义类，然后修改它们的左右padding：

第一步：修改HTML，给列加自定义类 #

<div id="container">
 <div class="row">
  <div class="col-lg-6 custom-project-col">
   <!-- 内容不变 -->
  </div>
  <div class="col-lg-6 custom-project-col">
   <!-- 内容不变 -->
  </div>
 </div>
</div>

第二步：在CSS里添加样式 #

.custom-project-col {
  padding-left: 0.75rem; /* 默认col的padding-left是1.5rem，这里减半 */
  padding-right: 0.75rem;
}

你可以根据需要调整0.75rem这个数值，直到达到你想要的间距。

额外提示：检查row的默认margin #

如果上面的方法还不够，你可以同时调整row的负margin（不过一般不建议，容易破坏布局）：

#container .row {
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}

这个数值要和你给col设置的padding数值对应，比如col的padding是0.75rem，row的margin就设为-0.375rem，这样整体布局不会偏移。

内容的提问来源于stack exchange，提问作者Sarah