我正在尝试将<ul>下拉列表与点击的按钮对齐，如http://jsfiddle.net/em0nh0pw/所示，但似乎无法获得需要使用的正确拉动或类。
具体做法是：
<button class="btn btn-primary dropdown-toggle" type="button" name="ttl_frontpage" id="ttl_frontpage" data-toggle="dropdown">
<span class="badge">10 min</span>
<span class="glyphicon glyphicon-edit"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="ttl_frontpage_menu">
<li><a href="#" data-value="60">1 min</a></li>
[..]
</ul>
理想情况下，我很乐意看到<ul>菜单在垂直和水平方向上都显示在按钮上方，但似乎也无法正确显示。非常感谢任何帮助！
答案 0 :(得分：1)
如果您需要居中ul，可以使用translateX轻松完成。
您需要更改一行并添加一行CSS：
在.dropdown-menu:
left: 50%; /* instead of left: 0; */
transform: translateX(-50%); /* add this one */
答案 1 :(得分：0)
需要删除left : 0部门的position: absolute
$(".dropdown-menu li a").click(function() {
$(this).parents(".dropdown").find('.btn').html('<span class="badge">' + $(this).text() + ' </span> <span class="glyphicon glyphicon-edit"></span>');
$(this).parents(".dropdown").find('input').val($(this).data('value'));
});.dropdown-menu{
margin: auto;
position: absolute;
left: 33%;
right: 33%;
}<div class="panel-body">
<form class="form-horizontal" method="post">
<input type="hidden" name="domain" value="testwat.pro">
<br>
<fieldset id="sbsets" class="">
<div class="panel panel-primary">
<div class="panel-heading panel-heading-custom">
<h3 class="panel-title">Front Page Cache</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-9" id="sbinfo">
Configure how long requests for your front page should be cached for, in seconds.
</div>
<div class="col-md-3" align="center">
<div class="dropdown pull-center">
<input type="hidden" name="ttl_frontpage">
<button class="btn btn-primary dropdown-toggle" type="button" name="ttl_frontpage" id="ttl_frontpage" data-toggle="dropdown"><span class="badge">10 min</span>
<span class="glyphicon glyphicon-edit"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="ttl_frontpage_menu">
<li><a href="#" data-value="60">1 min</a></li>
<li><a href="#" data-value="120">2 min</a></li>
<li><a href="#" data-value="300">5 min</a></li>
<li><a href="#" data-value="900">15 min</a></li>
<li><a href="#" data-value="1800">30 min</a></li>
<li><a href="#" data-value="3600">1 hour</a></li>
<li><a href="#" data-value="7200">2 hours</a></li>
<li><a href="#" data-value="10800">3 hours</a></li>
<li><a href="#" data-value="14400">4 hours</a></li>
<li><a href="#" data-value="18000">5 hours</a></li>
<li><a href="#" data-value="28800">8 hours</a></li>
<li><a href="#" data-value="43200">12 hours</a></li>
<li><a href="#" data-value="57600">16 hours</a></li>
<li><a href="#" data-value="86400">24 hours</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-md-2">
<input type="submit" id="save_settings" name="save_settings" value="Save" class="btn btn-primary">
<input type="submit" id="reset_settings" name="reset_settings" value="Reset" class="btn btn-primary">
</div>
<div class="col-md-10 control-label">
<span><h5><i>Settings changes can take up to 2 minutes to take effect.</i></h5></span>
</div>
</div>
</form>
</div>
这是工作 Demo
答案 2 :(得分：0)
这是因为，默认情况下，任何div元素都会呈现为block，这意味着它会从浏览器中获取width:100%。 Bootstrap提供了.dropdown类position:relative;属性。并且＆＃39;下拉菜单＆＃39;具有position:absolute;属性，因此遵循它的默认行为，它从最左边开始。
你需要很好地理解这一点。
要获得正确的输出，请进行2次更改。
使用text-align:center到您的父div，并通过类和inline-block类添加.dropdown属性。它会移除来自width的额外display:block;并正确对齐您的输出。
$(".dropdown-menu li a").click(function() {
$(this).parents(".dropdown").find('.btn').html('<span class="badge">' + $(this).text() + ' </span> <span class="glyphicon glyphicon-edit"></span>');
$(this).parents(".dropdown").find('input').val($(this).data('value'));
});.inline-block {
display: inline-block;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel-body">
<form class="form-horizontal" method="post">
<input type="hidden" name="domain" value="testwat.pro">
<br>
<fieldset id="sbsets" class="">
<div class="panel panel-primary">
<div class="panel-heading panel-heading-custom">
<h3 class="panel-title">Front Page Cache</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-9" id="sbinfo">
Configure how long requests for your front page should be cached for, in seconds.
</div>
<div class="col-md-3 text-center" align="center"> <!-- to align child content in center -->
<div class="dropdown inline-block"> <!-- added inline-block class -->
<input type="hidden" name="ttl_frontpage">
<button class="btn btn-primary dropdown-toggle" type="button" name="ttl_frontpage" id="ttl_frontpage" data-toggle="dropdown"><span class="badge">10 min</span>
<span class="glyphicon glyphicon-edit"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="ttl_frontpage_menu">
<li><a href="#" data-value="60">1 min</a>
</li>
<li><a href="#" data-value="120">2 min</a>
</li>
<li><a href="#" data-value="300">5 min</a>
</li>
<li><a href="#" data-value="900">15 min</a>
</li>
<li><a href="#" data-value="1800">30 min</a>
</li>
<li><a href="#" data-value="3600">1 hour</a>
</li>
<li><a href="#" data-value="7200">2 hours</a>
</li>
<li><a href="#" data-value="10800">3 hours</a>
</li>
<li><a href="#" data-value="14400">4 hours</a>
</li>
<li><a href="#" data-value="18000">5 hours</a>
</li>
<li><a href="#" data-value="28800">8 hours</a>
</li>
<li><a href="#" data-value="43200">12 hours</a>
</li>
<li><a href="#" data-value="57600">16 hours</a>
</li>
<li><a href="#" data-value="86400">24 hours</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-md-2">
<input type="submit" id="save_settings" name="save_settings" value="Save" class="btn btn-primary">
<input type="submit" id="reset_settings" name="reset_settings" value="Reset" class="btn btn-primary">
</div>
<div class="col-md-10 control-label">
<span><h5><i>Settings changes can take up to 2 minutes to take effect.</i></h5></span>
</div>
</div>
</form>
</div>