Bootstrap 3下拉菜单中心对齐不起作用

Posted 2023-03-05

【中文标题】Bootstrap 3下拉菜单中心对齐不起作用

【英文标题】：Bootstrap 3 dropdown menu center align not working

【发布时间】：2014-10-25 23:22:35

【问题描述】：

我无法将下拉菜单与通过悬停打开下拉菜单的父项的中心对齐。我试图 text-align: center 整个 .nav .navbar li 元素，但它不起作用。我试图设置边距并离开：整个 ul.dropdown-menu 的 50% 是下拉菜单，但它不起作用。这是html代码：

<ul class="nav navbar-nav navbar-right" id="headerDropdowns">
  <li><div class="btn-toolbar">
    <div class="btn-group">
      <button class="btnCustom" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">Our Difference</button>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Made in the USA</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Human Grade</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Ingredients Fresh</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">USDA Meats</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Our Story</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Campare</a></li>
      </ul>
    </div>
  </li>
</ul>

我应该在哪个类的下拉菜单或 nav navbar-nav 中进行对齐，我应该设置什么？

【问题讨论】：

请提供演示和 CSS。

【参考方案1】：

您可以使用变换来避免使用固定宽度：

.dropdown-menu 
  left: 50%;
  right: auto;
  text-align: center;
  transform: translate(-50%, 0);

答案受http://css-tricks.com/centering-percentage-widthheight-elements/影响

【讨论】：

PaulHighten 你摇滚！非常好的解决方案。 （别忘了你在某处需要position: absolute;...）谢谢你的链接。

更新：我只能在子内容是可用父容器宽度的一半或小于一半的情况下使这项工作。

不适用于窄屏/宽下拉菜单。

如果有问题的人可以发布小提琴，我会看看我是否可以进一步提供帮助

这对于我遇到的带有多个动态下拉菜单的问题非常有效。

【参考方案2】：

只要您愿意为下拉菜单 ul 提供固定宽度，您就可以这样做。见以下代码：

.dropdowntext-align:center;
.button, .dropdown-menumargin:10px auto
.dropdown-menuwidth:200px; left:50%; margin-left:-100px;

前 2 个声明用于可视化目的，但重要的部分是第 3 行。您需要定义一个宽度（在本例中为 200 像素），然后定义一个等于宽度一半的 margin-left。这适用于任何宽度，无论按钮是在右侧、左侧还是在元素之间（当然，button 元素可能需要一些空间）

你可以see a fiddle here

【讨论】：

我已将下拉菜单的宽度设置为 140 像素，边距设置为 -70，但它不起作用。我将很快在编辑中添加所有的 css。实际上，当我应用这些 CSS 设置时，什么都没有改变。

为我工作，非常感谢你在这里做了一个小提琴。

【参考方案3】：

唯一丑陋的方法是根据您的需要设置位置，例如：

.dropdown-menu
    right: -25px !important;

Fiddle

但这不是它应该使用的方式。请记住，您必须调整所有媒体设备的设置。

【参考方案4】：

这就是我的诀窍：

.dropdown-menu
    left: -25% !important;

您可能需要根据下拉菜单的填充等调整百分比值。