使用Bootstrap居中的下拉菜单 [英] Centering dropdown menu using Bootstrap

问题描述

我正在尝试在Bootstap中居中放置下拉菜单.

I'm trying to center my dropdown menu in Bootstap.

 <ul class="dropdown-menu">

默认情况下它拉到左侧，或者我可以使用如下定义的 pull-right 使其向右移动:

It pulls to the left by default, or I could use pull-right defined as follows to make it go to the right:

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

我想把它居中.我是Boostrap的新手，无法弄清楚如何将其居中.有小费吗?我尝试了对:50％，但这没用.

I want to center it though. I'm new to Boostrap and can't figure out how to center it. Any tips? I tried right:50% but that didn't work.

注意:我不希望在下拉菜单中将实际文本居中.我希望将实际的下拉菜单和carret放在其下拉菜单的居中位置.

Note: I'm not looking to center the actual text in the dropdown menu. I'm looking to center the actual dropdown menu and carret under the navigation menu item that it drops down from.

这是我模板中的完整代码段:

Here is my full code snippet in my template:

<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;
}

当使用默认的引导程序下拉菜单时，这对我有用.只需根据菜单的宽度调整左边距即可.

This worked for me when using a default bootstrap drop down menu. Just adjust the margin-left depending on how wide your menu is.

这篇关于使用Bootstrap居中的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！