Il menu a discesa Bootstrap non è posizionato correttamente

Question

Quando inserisco un dropdown bootstrap all'interno di un div che centra il menu a discesa utilizzando il "testo allineato: centro", il menu a discesa viene visualizzato nella posizione originale non centrata del menu a discesa. Il menu a discesa non sembra sapere che il suo pulsante di attivazione è stato spostato.

Il problema è rappresentato in questo jsfiddle:

https://jsfiddle.net/dkent600/wyos4ukt

Il violino contiene il seguente codice:

<div style="background-color:grey; text-align:center"> 
    <div class="dropdown"> 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
      Dropdown 
      <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
     </ul> 
    </div> 
</div> 

Grazie per alcun indizio su come risolvere questo problema.

Answer 1

Se si aggiunge la classe btn-group all'elemento .dropdown, il menu a discesa verrà posizionato correttamente.

Updated Exmple

<div class="btn-group dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
     Dropdown 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
</div> 

Il motivo per cui funziona è perché la classe aggiunge il seguente CSS. In tal modo, il menu a discesa è posizionato assolutamente relativo all'elemento padre.

.btn-group > .btn, 
.btn-group-vertical > .btn { 
    position: relative; 
    float: left; 
} 

---

In alternativa, si potrebbe anche aggiungere il seguente:

Updated Example

.dropdown { 
    position: relative; 
    display: inline-block; 
    vertical-align: middle; 
}