CSS 带块级的 Bootstrap 下拉按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20646548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Dropdown Button with Block Level?
提问by streetfire
I'm trying to make a bootstrap 3 dropdownbutton accept the full width (.btn-block class) properties. It doesn't seem to work the same way with the drop down button as it does with regular buttons. Here is my current code:
我正在尝试使 bootstrap 3下拉按钮接受全宽（.btn-block 类）属性。下拉按钮的工作方式似乎与常规按钮的工作方式不同。这是我当前的代码：
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-primary btn-block dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-cog"></span> Dealer Tools <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Dealer Area</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-phone"></span> App Registration</a></li>
</ul>
</div>
<!-- Single button -->
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<a href="http://www.agrigro.com/testarea/contact-us/">
<button type="button" class="btn btn-primary btn-block">
<span class="glyphicon glyphicon-envelope"></span> CONTACT US
</button>
</a>
</div>
</div>
How can I get this to work right so the dropdown button takes up the full col-6?
我怎样才能让它正常工作，以便下拉按钮占据完整的第 6 列？
回答by Zim
Apply btn-blockto both the btn-groupand btn
适用btn-block于btn-group和btn
<div class="btn-group btn-block">
<button type="button" class="btn btn-block btn-primary dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Dealer Tools <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Dealer Area</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-phone"></span> App Registration</a></li>
</ul>
</div>
回答by mykwdenver
When using a drop down, apply btn-block to btn-group first, then you can add col-?-? in the button's class to control the width of the button sections. Handy little trick.
使用下拉菜单时，先将 btn-block 应用到 btn-group，然后添加 col-?-? 在按钮的类中控制按钮部分的宽度。好用的小技巧。
<!-- Split button -->
<div class="btn-group btn-block">
<button type="button" class="btn col-lg-10 btn-lg btn-danger">Action</button>
<button type="button" class="btn col-lg-2 btn-lg btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu col-lg-12" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
回答by Tawani
<div class="btn-group btn-block">
<button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown">
<span class="col-lg-10">
Button dropdown
</span>
<span class="col-lg-2">
<span class="caret"></span>
</span>
</button>
<ul class="dropdown-menu btn-block" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
回答by Tun
For single button dropdown@Skelly answerworks. For the split button dropdown, I got the answer from Dave Ward's Using btn-block with Bootstrap 3 dropdown button groups.
对于单按钮下拉@Skelly答案有效。对于拆分按钮下拉菜单，我从Dave Ward的Using btn-block with Bootstrap 3 dropdown button groups 中得到了答案。
He uses col-*-*for split buttons
他col-*-*用于拆分按钮
<div class="col-sm-6">
<button class="btn btn-block btn-lg btn-success">Approve</button>
</div>
<div class="col-sm-6">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-lg btn-danger">Deny</button>
<button class="col-sm-2 btn btn-lg btn-danger dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li><a href="#">Reason 1</a></li>
<li><a href="#">Reason 2</a></li>
<li><a href="#">Reason 3</a></li>
</ul>
</div>
</div>
