html – 使用Bootstrap中心下拉菜单

我正试图将我的下拉菜单放在Bootstap中.

<ul class="dropdown-menu">

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

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

我想把它放在中心位置.我是Boostrap的新手,无法弄清楚如何居中.有小费吗？我尝试了正确：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.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.2);
  -moz-Box-shadow: 0 5px 10px rgba(0,0.2);
  Box-shadow: 0 5px 10px rgba(0,0.2);
  -webkit-Box-shadow: 0 5px 10px rgba(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;
}

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

原文地址：https://www.jb51.cc/html/226871.html