Bootstrap4 sidebar-nav导航链接间距调整无效，求替代解决方案

我来帮你分析下为什么你设置的padding-bottom没生效，以及几个可行的替代方案：

首先，你的样式没生效大概率是选择器权重不够——Bootstrap的.navbar组件自带了针对li和a的默认样式，你的.sidebar-nav>li>a选择器权重可能低于Bootstrap的默认样式，导致被覆盖了。

接下来是具体的解决方法：

方法1：提高选择器权重，自定义间距 #

你可以用更具体的选择器来覆盖Bootstrap的默认样式，比如直接结合.navbar类，或者给侧边栏加额外标识提升权重。同时，相比padding-bottom，用margin-bottom控制链接之间的间距可能更直观（padding是元素内部间距，margin是外部间距）。

示例CSS：

/* 更具体的选择器，确保样式优先级 */
.navbar.sidebar-nav li a {
  margin-bottom: 2rem; /* 可根据需求调整数值，比如15px、1rem等 */
}
/* 或者给li设置间距，控制整个列表项之间的距离 */
.navbar.sidebar-nav li {
  margin-bottom: 2rem;
}

如果还是不生效，可以临时用!important强制覆盖（不推荐长期使用，尽量通过提高选择器权重解决）：

.sidebar-nav>li>a {
  padding-bottom: 500px !important;
}

方法2：利用Bootstrap自带的间距工具类 #

Bootstrap4自带了一套间距工具类，完全不用写自定义CSS，直接给列表项添加对应类就能实现间距。比如mb-*系列类（margin-bottom），数值从0到5，对应不同的间距大小：

修改后的HTML代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2">
      <ul class="navbar sidebar-nav">
        <li class="active mb-4"><a href="#">Reports</a></li>
        <li class="mb-4"><a href="#">Reports</a></li>
        <li class="mb-4"><a href="#">Reports</a></li>
      </ul>
    </div>
    <div class="col-sm-9 col-md-10"></div>
  </div>
</div>

这里的mb-4表示margin-bottom为1.5rem，你可以根据需要换成mb-3（1rem）、mb-5（3rem）等，非常灵活。

方法3：检查样式覆盖情况 #

用浏览器开发者工具（按下F12）选中侧边栏的链接，查看「样式」面板，看看你的padding-bottom是不是被划掉了（说明被更高权重的样式覆盖）。找到覆盖它的Bootstrap默认样式，写出权重更高的选择器来替代。

比如Bootstrap默认的.navbar-nav .nav-link有自己的padding设置，你可以用.sidebar-nav .nav-link来覆盖：

.sidebar-nav .nav-link {
  padding-bottom: 2rem;
  /* 也可以同时调整padding-top，给链接上下都加间距 */
  padding-top: 2rem;
}

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