Question

我的网站上有一个地方正在使用一堆button元素，这些元素的样式为btn-block（来自Twitter Bootstrap文档的example）。我现在想把它们中的一些切换到分割按钮（example），但我似乎无法将分割按钮和普通按钮的长度相同。

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

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课程添加到HTML中的.btn-group即可。这就是你需要的所有CSS：

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

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

笔记的作者：Nicola Pressi

Answer 3

如果将类btn-block添加到.btn-group元素并给出dropdownbutton元素％widths，那就行了。

.dropdown-lead{
    width: 96%;
    box-sizing: border-box;
}
.dropdown-toggle{
    width: 4%;
    box-sizing: border-box;
}

以下是一个示例：http://jsfiddle.net/eBJGW/5/

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

3 个答案: