Zentrieren Dropdown-Menü mit Bootstrap

Question

Ich versuche, meine Dropdown-Menü in Bootstap zu zentrieren.

<ul class="dropdown-menu"> 

Es zieht auf die standardmäßig links, oder ich konnte pull-right definiert wie folgt verwenden, um es nach rechts gehen lassen:

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

Ich möchte, obwohl es zu zentrieren. Ich bin neu in Boostrap und kann nicht herausfinden, wie man es zentriert. Irgendwelche Tipps? Ich habe es richtig versucht: 50%, aber das hat nicht funktioniert.

Hinweis: Ich möchte nicht den eigentlichen Text im Dropdown-Menü zentrieren. Ich möchte das eigentliche Dropdown-Menü und den Carret unter dem Navigationsmenüpunkt, von dem es herunterfällt, zentrieren.

Hier ist mein vollständiger Code-Schnipsel in meiner Vorlage:

<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="https://stackoverflow.com/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; 
} 

Answer 1

Sie können unten als CSS hinzufügen und diese Klasse in Tag geben, wie unten gezeigt .

.centerDropdown { 
    left: auto !important; 
    right: -25% !important; 
} 
.centerDropdown:after { 
    left: auto !important; 
    right: 45% !important; 
} 

In HTML-Code,

<li class="dropdown"> 
    <a href="/channel/list" data-toggle="dropdown" class="dropdown-toggle"> 
     <i class="icon-th-list"></i> 
      Lists 
    </a> 
    <ul class="dropdown-menu centerDropdown"> 
      <li><a href="/list">Find a list</a></li> 
      <li><a href="/my">My lists</a></li> 
      <li><a href="/create">Create a list</a></li> 
    </ul> 
</li> 

Answer 2

.dropdown-menu { 
    left: 50% !important; 
    margin-left: -70px; 
} 

Das ist für mich gearbeitet, als Bootstrap Drop-Down-Menü einer Standard verwenden. Passen Sie den Rand links an, je nachdem wie breit Ihr Menü ist.

Answer 3

Diese Antwort ein bisschen spät, aber hoffentlich wird nützlich sein. Versuchen Sie Folgendes, um ein Bootstrap-Dropdown-Menü in Bezug auf das übergeordnete Element zu zentrieren.

Passen Sie die Größe nach Bedarf an, stellen Sie nur sicher, dass die Zahlenwerte (in diesem Beispiel 40px) übereinstimmen. Hier werden die linke und die rechte Seite des Dropdown-Menüs 40px nach links bzw. 40px nach rechts von der Parental/Origining-Verknüpfung gezogen.

BONUS ROUND: Wenn der Text eines Listenelements breiter als das Menü ist, sollten Sie die folgende Deklaration hinzufügen.

.dropdown-menu>li>a { 
    white-space: normal; 
}