我正在尝试使用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>
如何让它正常工作,以便下拉按钮占用完整的col-6?
答案 0 :(得分:37)
将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>
答案 1 :(得分:22)
使用下拉菜单时,首先将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>
答案 2 :(得分:9)
<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>
答案 3 :(得分:4)
单键下拉 @Skelly answer有效。对于拆分按钮下拉列表,我从 Dave Ward Using btn-block with Bootstrap 3 dropdown button groups得到了答案。
他使用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>
答案 4 :(得分:0)
我有一个不同的设置,但是使用Javascript,React Bootstrap 1.3.0和React 16.9.0对我有用的是将块参数同时应用于Dropdown和Dropdown.Toggle:
import Dropdown from 'react-bootstrap/Dropdown';
import 'bootstrap/dist/css/bootstrap.min.css';
<Dropdown block>
<Dropdown.Toggle block> Label for the button when collapsed </Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item>Option 1</Dropdown.Item>
<Dropdown.Item>Option 2</Dropdown.Item>
<Dropdown.Item>Option 3</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>