下拉菜單等寬的自舉按鈕組在引導

使用引導，我試圖做一個下拉菜單內的一個按鈕在對齊按鈕組中。更具體地說，我希望下拉菜單列表元素具有與下拉切換按鈕相同的寬度。下面的代碼除了下拉元素的寬度與切換按鈕不同之外，其他所有內容都會執行。下拉菜單等寬的自舉按鈕組在引導

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

下拉菜單等寬的自舉按鈕組在引導

回答

相關問題