如何在Python/Dash中修改Bootstrap导航药丸(Nav Pills)高度？

一、需要调整的核心属性 #

导航药丸的高度主要由**内边距（padding）**控制，无需直接设置height属性。你需要修改导航链接的上下内边距：

• padding-top：控制链接顶部空白区域大小
• padding-bottom：控制链接底部空白区域大小

如果需要优化文字垂直对齐效果，还可以搭配调整line-height属性。

二、创建自定义CSS文件（不修改原Bootstrap主题） #

在本地/asset目录下新建一个自定义CSS文件（比如命名为custom-sidebar.css），写入以下代码：

/* 针对垂直导航药丸的所有链接调整高度 */
.nav-pills .nav-link {
    padding-top: 0.25rem;  /* 自定义顶部内边距，按需修改数值 */
    padding-bottom: 0.25rem; /* 自定义底部内边距，按需修改数值 */
    /* 可选：调整行高优化文字垂直居中 */
    /* line-height: 1.4; */
}

/* 单独调整激活状态的导航链接（可选，保持和普通链接一致即可） */
.nav-pills .nav-link.active {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

选择器说明 #

使用.nav-pills .nav-link而非你找到的nav>li>a，是因为Dash生成的HTML结构中，导航药丸容器带有nav-pills类，导航链接带有nav-link类，这个选择器的优先级更高，能确保覆盖Bootstrap的默认样式。

三、Dash中自动加载自定义CSS #

Dash会自动扫描并加载/asset目录下的所有CSS文件，不需要在Python代码中额外引入。

样式覆盖优先级规则 #

1. 选择器优先级：自定义CSS中使用的.nav-pills .nav-link是两个类选择器组合，优先级高于Bootstrap默认的单个.nav-link选择器，因此会自动覆盖原样式。
2. 文件加载顺序：如果Bootstrap主题CSS文件（比如slate.css）也在/asset目录下，确保自定义CSS文件的文件名在字母顺序上排在主题文件之后（比如custom-sidebar.css在slate.css之后），后加载的自定义样式会覆盖先加载的主题样式。

四、无需修改Python代码 #

你现有的侧边栏Python代码不需要任何改动，自定义CSS会自动作用于对应的导航药丸组件。

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