如何缩小Bootstrap导航列中链接之间的间距？

你当前链接之间的间距，主要来自Bootstrap默认样式里.nav-pills li的外边距（margin）。要缩小间距，直接自定义CSS覆盖这个默认值就行：

步骤1：添加自定义CSS规则 #

在现有CSS里加上这段代码，调整margin-bottom的数值来控制间距大小（数值越小，间距越窄）：

.nav-pills li {
  margin-bottom: 4px; /* 替换成你想要的间距值，默认样式里的间距可能更大，改小即可 */
}

完整修改后的CSS示例 #

a {
  color: white;
}

.footer-background {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #1c2a48;
}

.logo,
.nav {
  margin-bottom: 10px;
}

.nav-pills {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 新增：缩小链接所在列表项的间距 */
.nav-pills li {
  margin-bottom: 4px;
}

原理说明 #

你给.nav-pills设置了flex-direction: column，列表项是垂直排列的，每个<li>的margin-bottom直接决定了上下链接之间的间距。修改这个数值就能按需调整间距大小。

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