Twitter Bootstrap中的全宽分割下拉按钮

Question

我在我的网站上有一个地方,它使用了一些button样式元素btn-block(例如来自Twitter Bootstrap Docs).我现在想把它们中的一些切换到分割按钮(例子),但我似乎无法让分割按钮和普通按钮长度相同.

我已经尝试过各种各样的东西,但我似乎找不到办法做到这一点.有没有人设法做到了？请记住,如果我不需要,我不想硬编码任何元素的宽度.(请注意,这包括不使用硬编码百分比.)如果绝对必要,我可以为按钮的切换部分定义宽度(因为我知道那里只会有一个箭头字符)但是想要指定尽可能少的"魔术数字",以便将来保持代码可维护性.

Answer 1

将下拉导线包裹在容器中:

(注意:此示例适用于Bootstrap 2.x)

.dropdown-lead {
  width: 100%;
}

.leadcontainer {
  left: 0;
  position: absolute;
  right: 30px;
}

.dropdown-toggle {
  width: 30px;
  float: right;
  box-sizing: border-box;
}

.fillsplit {
  position: relative;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>

<button class="btn btn-block btn-primary" type="button">Block level button</button>
<div class="btn-group btn-block fillsplit">
  <div class="leadcontainer">
    <a class="btn btn-primary dropdown-lead" href="#"><i class="icon-user icon-white"></i> User</a>
  </div>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a>
    </li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a>
    </li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a>
    </li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a>
    </li>
  </ul>
  <div>
  </div>

Answer 2

我一直在寻找同样的行为,并找到了这个flexbox解决方案:http://codepen.io/ibanez182/pen/MwZwJp

这是一个优雅的实现,利用该flex-grow属性.

只需将.btn-flex类添加到.btn-groupHTML中即可.这是你需要的所有CSS:

.btn-flex {
    display: flex;
    align-items: stretch;
    align-content: stretch;
}

.btn-flex .btn:first-child {
    flex-grow: 1;
}

归功于笔的作者:Nicola Pressi