下拉菜單不服從中心

Question

我想要獲得一系列垂直放置和居中放置的控件。控件出現的很好，但是當我使下拉下拉時，下拉文本在屏幕上顯示爲左對齊，而不是在中心下拉控件下。我已經花了幾個小時的時間，但我無法正確理解。幫助肯定會被讚賞。這裏是我使用的是什麼：

<div style="margin-top:50px; text-align: center;"> 
    <div class="dropdown"> 
     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shift/Project2 
     <span class="caret"></span></button> 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
      <li><a class="dropdown-item" href="#">HTML</a></li> 
      <li><a class="dropdown-item" href="#">CSS</a></li> 
      <li><a class="dropdown-item" href="#">JavaScript</a></li> 
     </ul> 
    </div> 

    <input autocorrect="off" autocapitalize="off" spellcheck="false" type="text" id="xxx" style="margin-top:50px;"> 

</div> 

Answer 1

你可以解決這個問題，使用CSS像我一樣在這裏：

http://www.bootply.com/zck8H4EVt4

只需添加到您的CSS：

.dropdown-menu { 
    left: 50%; 
    transform: translate(-50%, 0); 
} 

---

//編輯：

對不起，我忘了BTN組類...

只是從第一溶液中取出CSS部分，添加.btn組到您的下拉菜單，你的BTN-組等之後使用.clearfix我在這裏：

<div style="margin-top:50px; text-align: center;"> 
    <div class="dropdown btn-group"> 
     <button class="btn btn-primary dropdown-toggle" id="dropdownMenu1" aria-expanded="false" aria-haspopup="true" type="button" data-toggle="dropdown">Shift/Project2 
     <span class="caret"></span></button> 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
      <li><a class="dropdown-item" href="#">HTML</a></li> 
      <li><a class="dropdown-item" href="#">CSS</a></li> 
      <li><a class="dropdown-item" href="#">JavaScript</a></li> 
     </ul> 
    </div> 
    <div class="clearfix"></div> 
    <input id="xxx" style="margin-top:50px;" spellcheck="false" type="text" autocapitalize="off" autocorrect="off"> 
</div> 

工作例如：http://www.bootply.com/lryEFqtmdp