qua*_*ddy 2 css twitter-bootstrap drop-down-menu
使用引导程序，我试图在合理的按钮组中的按钮之一内创建一个下拉菜单。更具体地说，我希望下拉菜单列表元素与下拉切换按钮具有相同的宽度。下面的代码执行所有操作，除了下拉元素的宽度与切换按钮不同之外。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.pull-right{
margin-top: 7px
}
</style>
</head>
<body>
<div class="container">
<h2>Justified Button Groups</h2>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<div class="dropdown btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Sony<span class="caret pull-right"></span></button>
<ul class="dropdown-menu">
<li><a href="#" class="btn btn-default btn-block">HTML</a></li>
<li><a href="#" class="btn btn-default btn-block">CSS</a></li>
<li><a href="#" class="btn btn-default btn-block">JavaScript</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
您应该考虑使用更接近按钮组文档的结构，方法是用 div 包装前两个按钮并从下拉列表中btn-group删除类。.btn
对于宽度，使用min-width: 100%覆盖默认值min-width: 160px;。
工作示例：
.dropdown-menu.dropdown-menu-wide {
min-width: 100%;
text-align: center;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2>Justified Button Groups</h2>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<a class="btn btn-primary" href="#" role="button">Apple</a>
</div>
<div class="btn-group" role="group">
<a class="btn btn-primary" href="#" role="button">Samsung</a>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sony <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-wide">
<li><a href="#">HTML</a>
</li>
<li><a href="#">CSS</a>
</li>
<li><a href="#">JavaScript</a>
</li>
</ul>
</div>
</div>
</div>
<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.6/js/bootstrap.min.js"></script>