带分割按钮下拉列表的btn-block

Question

主要观点： 垂直按钮组列表，其中每个按钮完全填充父级。

问题： 拆分按钮下拉不要做我需要的。将.btn-block添加到按钮/按钮组并未解决问题（下拉列表移动到新行作为分隔按钮）。

我有什么：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="btn-group">
        <button type="button" class="btn btn-info">
          Button 1
        </button>
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
        </button>
        <ul class="dropdown-menu">
          <li>
            <a href="#">
									1
								</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <button type="button" class="btn btn-block btn-info">
        Button 2
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <button type="button" class="btn btn-block btn-info">
        Button 3
      </button>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

问题：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="btn-group btn-block">
        <button type="button" class="btn btn-block btn-info">
          Button 1
        </button>
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
        </button>
        <ul class="dropdown-menu">
          <li>
            <a href="#">
									1
								</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <button type="button" class="btn btn-block btn-info">
        Button 2
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <button type="button" class="btn btn-block btn-info">
        Button 3
      </button>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

需要做什么，解决分割下拉按钮的问题？像那样：

Answer 1

你可以通过向btn组添加btn-block来实现。以及按钮本身。但它会将菜单开启工具移动到新的一行。所以我在这里做了一个小技巧：

jsfiddle.net/u753bbsg/