Bootstrap 3下拉菜单中心对齐不起作用
我无法将下拉列表与使用悬停打开下拉列表的父级中心对齐。 我试图文字对齐：整个.nav .navbar li元素的中心，并且它不起作用。 我试图设置保证金，并留下：整个ul.dropdown菜单是下拉菜单的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中，我应该进行校准，并且应该设置什么？
您可以使用变换来避免使用固定宽度：
.dropdown-menu {
left: 50%;
right: auto;
text-align: center;
transform: translate(-50%, 0);
}
回答受影响http://css-tricks.com/centering-percentage-widthheight-elements/
只要你愿意给下拉ul一个固定的宽度，你就可以做到这一点。 见下面的代码：
.dropdown{text-align:center;}
.button, .dropdown-menu{margin:10px auto}
.dropdown-menu{width:200px; left:50%; margin-left:-100px;}
前两个声明是为了可视化的目的，但重要的部分是第三行。 你需要定义一个宽度（在这个例子中是200px），然后一个margin-left等于宽度的一半。 这将适用于任何宽度，无论按钮位于右侧，左侧还是元素之间（但当然，您可能需要一些空间来放置button元素）
你可以在这里看到一个小提琴
唯一的，丑陋的方式是根据您的需求设置位置，如：
.dropdown-menu{
right: -25px !important;
}
小提琴
但这不是它应该使用的方式。 请记住，您必须调整所有媒体设备的设置。
链接地址: http://www.djcxy.com/p/83671.html