Önyükleme açılır menüsü doğru şekilde yerleştirilmiyor

Question

CSS "metin hizala: merkez" ibaresini kullanarak açılır listeyi ortalayan bir bölmenin içine bir önyükleme düşümü yerleştirdiğimde, açılır menü, açılır menünün orijinal merkezlenmemiş konumunda görüntülenir. Açma, tetikleme düğmesinin taşındığını bilmiyor.

sorunu bu jsfiddle temsil edilir:

https://jsfiddle.net/dkent600/wyos4ukt

keman aşağıdaki kodu içerir: Bu nasıl giderileceğini öğrenmek için herhangi bir ipucu

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

teşekkür ederiz.

Answer 1

btn-group sınıfını .dropdown öğeye eklerseniz, açılır menü düzgün bir şekilde konumlandırılır. sınıf aşağıdaki CSS ekler çünkü

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> 

çalıştığını nedenidir. Bunu yaparken, açılan menü, ana öğeye kesinlikle nispi yerleştirilmiştir.

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

---

Alternatif olarak, aşağıdakileri ekleyebilirsiniz:

Updated Example

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