我试图在 Bootstap 中将我的下拉菜单居中。
<ul class="dropdown-menu">
它默认向左拉,或者我可以使用如下定义的 pull-right
使其向右拉:
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
不过我想把它居中。我是 Boostrap 的新手,不知道如何将它居中。有小费吗?我尝试了 right:50%,但没有用。
注意:我不想让下拉菜单中的实际文本居中。我希望将实际的下拉菜单和 Carret 置于其从中下拉的导航菜单项的中央。
这是我模板中的完整代码片段:
<ul class="nav">
<li id="tab_profile">
<a href="{% url profile_detail user.username %}">{% trans "PROFILE" %}</a>
</li>
<li id="product_data">
<a href="{% url all_models %}">{% trans "PRODUCT DATA" %}</a>
</li>
<li id="product_library">
<a href="{% url library %}">{% trans "LIBRARY" %}</a>
</li>
<li id="database">
<a href="/DATABASE/">{% trans "DATABASE" %}</a>
</li>
<li class="dropdown" id = "community">
<a class="dropdown-toggle" href="#">COMMUNITY</a>
<ul class="dropdown-menu pull-right">
<li> <a href="/profiles">Search</a></li>
<li><a href="/questions/">Questions and Answers</a></li>
<li><a href="{% url view_requests %}">Requests</a></li>
</ul>
</li>
</ul>
CSS:
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 4px 0;
margin: 1px 0 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.dropdown-menu.pull-right {
margin-right: auto;
margin-left: auto;
}
最佳答案
.dropdown-menu {
left: 50% !important;
margin-left: -70px;
}
这在使用默认 Bootstrap 下拉菜单时对我有用。只需根据菜单的宽度调整 margin-left。
关于html - 使用 Bootstrap 居中下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13547687/