css - 具有 block 级别的 Bootstrap 下拉按钮？

Question

我正在尝试使 bootstrap 3 dropdown 按钮接受全宽(.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？

Answer 1

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

演示:http://bootply.com/101166