Rozwijanie menu rozwijanego menu Bootstrap 3 nie działa

Question

Nie mogę wyrównać listy rozwijanej do środka jednostki nadrzędnej, w której menu rozwijane jest otwierane, po najechaniu kursorem. Próbowałem wyrównać tekst: centrum dla wszystkich elementów .nav .navbar li, i nie działa. Próbowałem ustawić margines i lewy: 50% dla całego ul.dropdown-menu, które jest rozwijane i nie działa. Oto kod 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> 

W jakiej klasy rozwijana-menu lub nav navbar-nav, powinienem zrobić Aligment, i co mam ustawić?

Answer 1

Jedyne, brzydki sposób to ustawić pozycję w zależności od potrzeb, takich jak: powinien

.dropdown-menu{ 
    right: -25px !important; 
} 

Fiddle

Ale thas nie sposób go stosować. Pamiętaj, że musisz dostosować ustawienie dla wszystkich urządzeń multimedialnych.

Answer 2

Możesz to zrobić tak długo, jak długo będziesz chciał podać listę o stałej szerokości. Zobacz kod poniżej:

.dropdown{text-align:center;} 
.button, .dropdown-menu{margin:10px auto} 
.dropdown-menu{width:200px; left:50%; margin-left:-100px;} 

Pierwsze 2 deklaracje są przeznaczone do wizualizacji, ale ważną częścią jest trzecia linia. Musisz zdefiniować szerokość (w tym przypadku 200px), a następnie margin-left równą połowie szerokości. Będzie to działać z dowolnej szerokości, bez względu na to, czy przycisk jest po prawej, lewej lub między elementami (ale oczywiście prawdopodobnie będziesz potrzebować trochę miejsca dla elementu button)

Można see a fiddle here

Answer 3

Można używać przekształcić w celu uniknięcia konieczności korzystania stałych szerokościach:

.dropdown-menu { 
    left: 50%; 
    right: auto; 
    text-align: center; 
    transform: translate(-50%, 0); 
} 

Odbierz wpływem http://css-tricks.com/centering-percentage-widthheight-elements/