如何居中Bootstrap 3导航栏的内联子菜单

Bootstrap 3的下拉菜单默认是左对齐父元素的，要让子菜单居中展示，我们可以通过自定义CSS调整它的定位逻辑。针对你给出的菜单结构，试试下面的方案：

1. 添加自定义CSS样式 #

在你的样式文件中插入以下代码：

/* 确保父菜单项为相对定位，作为子菜单的定位基准 */
.menu-item-has-children.dropdown.submenu {
    position: relative;
}

/* 调整下拉菜单的定位，实现居中效果 */
.menu-item-has-children.dropdown.submenu .dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
    right: auto; /* 覆盖Bootstrap默认的右侧定位规则 */
    min-width: 180px; /* 可根据实际需求调整菜单宽度 */
}

2. 原理说明 #

• 默认情况下，.dropdown-menu会以父元素的左边缘为基准对齐，设置left: 50%会让菜单的左边缘对齐父元素的中心位置；
• transform: translateX(-50%)会把菜单向左偏移自身宽度的一半，最终实现整个菜单相对于父元素居中。

额外优化（可选） #

如果需要让菜单内的文字也居中，可以再加一段样式：

.menu-item-has-children.dropdown.submenu .dropdown-menu li a {
    text-align: center;
}

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