Question

使用bootstrap，我试图在对齐的按钮组中的一个按钮内创建一个下拉菜单。更具体地说，我希望下拉菜单列表元素具有与下拉切换按钮相同的宽度。下面的代码除了下拉元素的宽度之外的所有内容都与切换按钮不同。

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

Answer 1

您应该考虑使用更接近button groups文档的结构，方法是将前两个按钮用btn-group div包装，然后从下拉列表中删除.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>

Answer 2

您可以使用给定宽度来管理下拉菜单

.dropdown-menu{ width:100%;}

Answer 3

试试这段代码:)

.dropdown-menu{
    width: 100%;
    text-align: center;
}

具有相等宽度的下拉菜单，用于引导程序中的对齐按钮组

3 个答案: