Выпадающее меню, не расположенное по кнопке

Question

Почему выпадающее меню не центрировано на кнопке?

Bootply

/* CSS used here will be applied after bootstrap.css */ 
 
#cta { 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t background-color: white; 
 
\t width: 50%; 
 
\t margin-left: auto; !important; 
 
\t margin-right: auto; !important; 
 
\t margin-top: 50px; 
 
\t vertical-align: middle; 
 
\t text-align: center; 
 
}

<div style="background-color:rgba(255, 255, 255, 0.8);" id="cta"> 
 
    <h1>Welcome! Let's Get Started!</h1> 
 
    <p>Select a map and let the fun begin.</p> 
 

 
\t <div class="dropdown"> 
 
\t <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select a map! 
 
\t <span class="caret"></span></button> 
 
\t <ul class="dropdown-menu"> 
 
\t  <li><a href="#">Dust II</a></li> 
 
\t  <li><a href="#">Mirage</a></li> 
 
\t  <li><a href="#">Inferno</a></li> 
 
\t  <li class="divider"></li> 
 
\t  <li class="dropdown-header">More coming soon!</li> 
 
\t </ul> 
 
\t </div> 
 

 
</div> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.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.5/js/bootstrap.min.js"></script>

Answer 1

контейнер представляет собой блок-элемент, это означает, что она будет расширяться на всю ширину его контейнера. Кнопка центрирована, но раскрывающееся меню установлено на самый левый край .drop-down.

Чтобы исправить это, просто установите родительский элемент в inline-block, чтобы он занимал минимальное пространство.

.dropdown { 
    display: inline-block; 
} 

Демо:

/* CSS used here will be applied after bootstrap.css */ 
 
#cta { 
 
    font-family: 'Open Sans', sans-serif; 
 
    background-color: white; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    margin-top: 50px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
.dropdown { 
 
    display: inline-block; 
 
}

<div style="background-color:rgba(255, 255, 255, 0.8);" id="cta"> 
 
    <h1>Welcome! Let's Get Started!</h1> 
 
    <p>Select a map and let the fun begin.</p> 
 
    <div class="dropdown"> 
 
     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select a map! 
 
     <span class="caret"></span></button> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Dust II</a></li> 
 
      <li><a href="#">Mirage</a></li> 
 
      <li><a href="#">Inferno</a></li> 
 
      <li class="divider"></li> 
 
      <li class="dropdown-header">More coming soon!</li> 
 
     </ul> 
 
    </div> 
 
</div> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.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.5/js/bootstrap.min.js"></script>