下拉菜单不以按钮为中心

Question

为什么下拉菜单不在按钮的中心？

Bootply

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

容器是一个块元素，这意味着它将扩展到其容器的整个宽度。该按钮居中，但下拉菜单设置为.drop-down的最左边。

要解决此问题，只需将父级设置为inline-block，这样只需要最少的空间。

.dropdown {
    display: inline-block;
}

<强>演示：

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;