twitter-bootstrap Twitter Bootstrap 中的全宽拆分下拉按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14695985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full Width Split Dropdown Button in Twitter Bootstrap
提问by Moshe Katz
I have a place on my site which is using a bunch of buttonelements styled with btn-block(examplefrom the Twitter Bootstrap Docs). I now want to switch some of them to split buttons (example), but I can't seem to get the split buttons and the normal buttons to be the same length.
我在我的网站上有一个地方使用了一堆button带有样式的元素btn-block（来自 Twitter Bootstrap Docs 的示例）。我现在想将其中一些切换为拆分按钮（示例），但我似乎无法使拆分按钮和普通按钮的长度相同。
I have experimented with all kinds of things, but I can't seem to find a way to do this. Has anyone ever managed to do it? Keep in mind that I do not want to hard-code the width of any elements if I don't have to. (Note that this includes not using hard-coded percentages either.) If it is absolutely necessary, I am OK with defining a width for the toggle part of the button (because I know there will only be a single arrow character in there) but want to specify as few "magic numbers" as possible in order to keep the code maintainable in the future.
我已经尝试过各种各样的事情，但我似乎无法找到一种方法来做到这一点。有没有人设法做到过？请记住，如果不需要，我不想对任何元素的宽度进行硬编码。（请注意，这也包括不使用硬编码百分比。）如果绝对必要，我可以为按钮的切换部分定义宽度（因为我知道那里只会有一个箭头字符）但是希望指定尽可能少的“幻数”，以便将来保持代码的可维护性。
采纳答案by mccannf
Wrap the dropdown-lead in a container:
将下拉引线包裹在容器中：
(Note: This example is for Bootstrap 2.x)
（注意：此示例适用于 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>回答by sldk
I was looking for the same kind of behavior and found this flexbox solution: http://codepen.io/ibanez182/pen/MwZwJp
我正在寻找相同的行为并找到了这个 flexbox 解决方案：http://codepen.io/ibanez182/pen/MwZwJp
It's an elegant implementation which makes use of the flex-growproperty.
这是一个优雅的实现，它利用了该flex-grow属性。
Just add the .btn-flexclass to the .btn-groupin your HTML. This is all the CSS you need:
只需将.btn-flex类添加到.btn-groupHTML 中。这是您需要的所有 CSS：
.btn-flex {
display: flex;
align-items: stretch;
align-content: stretch;
}
.btn-flex .btn:first-child {
flex-grow: 1;
}
Credit goes to the author of the pen: Nicola Pressi
归功于这支笔的作者：Nicola Pressi
回答by belens
If you add the class btn-block to the .btn-group element and give the dropdownbutton elements % widths, that'd do the trick.
如果您将类 btn-block 添加到 .btn-group 元素并为 dropdownbutton 元素提供 % 宽度，那就行了。
.dropdown-lead{
width: 96%;
box-sizing: border-box;
}
.dropdown-toggle{
width: 4%;
box-sizing: border-box;
}
Here's an example: http://jsfiddle.net/eBJGW/5/
这是一个例子：http: //jsfiddle.net/eBJGW/5/
