带有拆分按钮下拉菜单的 btn-block答案

【问题标题】：btn-block with splited button dropdown带有拆分按钮下拉菜单的 btn-block
【发布时间】：2015-08-14 20:38:13
【问题描述】：

主要思想：垂直按钮组列表，其中每个按钮自己完全填充父项。

问题：拆分按钮下拉不做我需要的。将.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>

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

【问题讨论】：

什么都不懂。您到底想做什么，因为拆分按钮可以正常工作。
@PraveenKumar 我添加了一个我想看的截图。
知道了...我知道你想做的事了。

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

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

jsfiddle.net/u753bbsg/

【讨论】：