如何使用Bootstrap Scrollspy调整导航栏链接对齐方式实现居中

问题原因 #

你使用的flex布局属性有误，justify-items是Grid布局的专属属性，在Flex布局中不生效；align-content仅在Flex容器内存在多行子元素时生效，单行布局下不会起作用。

修正方案 #

替换你的CSS代码为如下内容即可实现水平居中：

.nav-pills {
    display: flex;
    /* 主轴（默认水平方向）子元素居中 */
    justify-content: center;
    /* 交叉轴（垂直方向）子元素居中，按需添加 */
    align-items: center;
    /* 确保导航容器占满父级宽度，避免容器本身宽度不够导致看不出居中效果 */
    width: 100%;
}

异常排查 #

如果修改后依然不生效，可以按以下顺序排查：

• 检查是否有更高优先级的CSS规则覆盖了当前样式，比如Bootstrap原生的.nav类默认设置了justify-content: flex-start，可以给当前ul添加自定义类名（比如my-nav），调整选择器优先级为.my-nav.nav-pills即可覆盖默认样式
• 检查导航的父容器是否存在宽度限制、浮动、定位等属性干扰布局

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