Centrum Bootstrap wyrównaj menu rozwijane

Question

Mam przycisk rozwijany na środku mojej strony, ale kiedy klikam menu rozwijane, rzeczywista rozwijana część jest nadal po lewej stronie. W czym problem?

HTML

<div class="row"> 
    <div class="col-md-12 school-options-dropdown"> 
      <div class="dropdown"> 
       <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a School 
       <span class="caret"></span></button> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Add your school</a></li> 
        <li><a href="#">Hello</a></li> 
       </ul> 
      </div> 
    </div> 
</div> 

CSS

div.school-options-dropdown { 
    text-align: center; 
} 

.dropdown { 
    text-align:center; 
} 

.dropdown-menu { 
    text-align: center; 
} 

Answer 1

Trzeba umieścić menu rozwijane i przycisk przełączania wewnątrz .btn-group.

Ponadto Bootstrap udostępnia .text-center property w celu wyrównania zawartości. Można go użyć na .school-options-dropdown zamiast ręcznie dodawać CSS.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="row"> 
 
    <div class="col-md-12 school-options-dropdown text-center"> 
 
    <div class="dropdown btn-group"> 
 

 
     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a School 
 
     <span class="caret"></span> 
 
     </button> 
 

 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Add your school</a></li> 
 
     <li><a href="#">Hello</a></li> 
 
     </ul> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 2

Jeśli nie chcesz zmienić swój kod HTML, CSS to rozwiąże problem:

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

Example on jsfiddle.net.

Answer 3

Jeśli szukasz centrum wyrównać zawartość menu, a następnie

ul.dropdown-menu>li { 
    text-align: center; 
} 

może załatwić sprawę.

Answer 4

Upewnij się, że dodajesz wyrównanie w całej klasie div, definiując je: