如何在Bootstrap 3导航栏的菜单项之间添加"/"分隔符？

你遇到的问题是因为:before伪元素的默认样式没和导航菜单项的对齐方式匹配，导致分隔符跑到了上方。咱们来一步步修正这个问题：

问题根源 #

你的原始CSS只设置了content: " / ";，但没有定义伪元素的显示方式和垂直对齐规则。Bootstrap的.navbar-nav li默认是float: left或display: inline-block，而伪元素默认是inline状态，没有对齐设置的话就会出现错位。

修正后的CSS方案 #

.navbar-custom .navbar-links-custom li:not(:first-child):before {
    content: " / ";
    /* 让伪元素和菜单项垂直居中对齐 */
    display: inline-block;
    vertical-align: middle;
    /* 调整分隔符与前后菜单项的间距 */
    margin: 0 10px;
    /* 避免分隔符干扰菜单项的点击交互 */
    pointer-events: none;
}

/* 排除下拉菜单的子项，防止子菜单也出现分隔符 */
.navbar-custom .navbar-links-custom .dropdown-menu li:before {
    content: none;
}

关键代码解释 #

• li:not(:first-child):before：只给除第一个菜单项外的元素添加分隔符，避免最左侧出现多余的"/"
• display: inline-block + vertical-align: middle：让分隔符和菜单项文字保持垂直居中对齐
• margin: 0 10px：给分隔符前后留出合适间距，避免和菜单项挤在一起
• pointer-events: none：防止分隔符区域干扰菜单项的点击事件
• 额外的.dropdown-menu li:before规则：确保下拉菜单的子列表不会继承分隔符样式，保持子菜单整洁

把这段CSS替换你原来的代码，就能看到分隔符正确显示在菜单项之间且垂直居中啦。

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