Css 引导中对齐按钮组的等宽下拉菜单_Css_Twitter Bootstrap_Drop Down Menu

Css 引导中对齐按钮组的等宽下拉菜单

css twitter-bootstrap drop-down-menu

Css 引导中对齐按钮组的等宽下拉菜单,css,twitter-bootstrap,drop-down-menu,Css,Twitter Bootstrap,Drop Down Menu,使用bootstrap，我试图在对齐按钮组中的一个按钮内创建一个下拉菜单。更具体地说，我希望下拉菜单列表元素具有与下拉切换按钮相同的宽度。下面的代码执行所有操作，除了下拉元素的宽度不同于切换按钮 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name=

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

您可以使用“给宽度”下拉菜单进行管理

.dropdown-menu{ width:100%;}

您可以使用“给宽度”下拉菜单进行管理

.dropdown-menu{ width:100%;}

您应该考虑使用BTN组DIV包装前两个按钮，并从下拉列表中删除.btn类，使用更接近文档的结构。

对于宽度，使用最小宽度：100%覆盖默认最小宽度：160px

工作示例：

.dropdown-menu.dropdown-menu-wide{ 最小宽度：100%；文本对齐：居中； } 对齐按钮组索尼

您应该考虑使用BTN组DIV包装前两个按钮，并从下拉列表中删除.btn类，使用更接近文档的结构。

对于宽度，使用最小宽度：100%覆盖默认最小宽度：160px

工作示例：

.dropdown-menu.dropdown-menu-wide{ 最小宽度：100%；文本对齐：居中； } 对齐按钮组索尼请尝试以下代码：

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

请尝试以下代码：

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