将引导程序下拉菜单相对于父菜单居中对齐

Center align Bootstrap dropdown menu with respect to Parent menu

本文关键字：对齐 菜单 引导程序 下拉菜单 相对于      更新时间：2023-09-26

我知道有几个帖子的标题相同。但没有一个对我来说效果这么好。

我的测试网址：url

我已经在这里构建了菜单，使用Bootstrap 3。

我试图实现的是下拉列表应该居中对齐。

到目前为止我尝试了什么：

.navbar-nav > li > .dropdown-menu{
 left : -50%;
}

但它正在将菜单推向极左。

下拉菜单当前向左对齐。有人能告诉我为什么left: -50%值会把它推到最左边，而这实际上不应该发生吗？

请使用以下CSS作为规则：

#navbar.navbar-collapse.collapse .dropdown.open .dropdown-menu {
  left: 50%;
  margin-left: -91px;
}

原因是：

  • 下拉菜单宽度=182px
  • 保持left: 50%将使其从中心开始
  • 从中心出发，它必须行驶其width的一半，即91px

注意：如果!important不起作用，可以将其放入left，但这只是一个临时修复。

好吧，的组合

left: 50% !Important;
transform: translate(-50%) !important;

工作！！谢谢

相关文章：