Bootstrap 3 nav下拉中心

Question

我在Bootstrap 3中定制了一个菜单，我不确定如何将下拉框相对于父项进行居中。

这里是解释什么是我想要做的图像 - http://i.picpar.com/MBw.png

这里有一个jsbin - http://jsbin.com/oCorUjA/1/

谢谢！

编辑：任何人都可以帮助我吗？我已经尝试了很多东西，并没有取得任何进展。

Answer 1

我有同样的问题，我所做的是给每个下拉菜单它自己的ID，那么我会在CSS定义元素，...你正在尝试基本上做的是这样的：

别t首先覆盖核心引导程序CSS ......但在Google Chrome浏览器中，检查元素，找到下拉菜单时添加一个页边距：-35px;你会发现你的第一个下拉列表将排在中间位置，所以？...这应该给你一个想法，你需要为每个下拉菜单使用它自己的ID :-) 你可能不想使用负边距，我只是给你一个想法做什么：

我个人给每个下拉它自己的列ID，并添加了正确的CSS在中心准确对齐，就像你想... 希望这有助于！

Answer 2

问题是您将最小宽度设置为160像素的下拉菜单（当您将鼠标悬停在其上时切换）。它们设置为float：left，并且始终为160px宽度，但上面的导航栏宽度基于您键入的单词的长度（服务器，托管服务等）。您可以通过将（.dropdown-menu）css位置更改为相对而非绝对来解决此问题。这会导致导航栏在您将鼠标悬停在项目上时弹跳，除非您还将（.navbar-nav li a）设置为最小宽度160像素。我建议使用firefox作为浏览器，以便您可以检查元素，进行临时css更改以查看差异，并检查移动响应。祝你好运