下拉菜单等宽的自举按钮组在引导

使用引导，我试图做一个下拉菜单内的一个按钮在对齐按钮组中。更具体地说，我希望下拉菜单列表元素具有与下拉切换按钮相同的宽度。下面的代码除了下拉元素的宽度与切换按钮不同之外，其他所有内容都会执行。下拉菜单等宽的自举按钮组在引导

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

来源

2016-07-08 quantdaddy

您可以通过给定宽度管理由具有btn-group格包裹你的前两个按钮，并通过删除到下拉菜单

.dropdown-menu{ width:100%;}

来源

2016-07-08 03:31:19 ankit

完美的作品！谢谢！ – quantdaddy

欢迎......... – ankit

您应该考虑使用一个结构更接近文档进行button groups.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>

来源

2016-07-08 03:35:15 vanburen

试试这个代码:)

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

来源

2017-12-04 17:54:25 amirouche

下拉菜单等宽的自举按钮组在引导

回答

相关问题