CSS Bootstrap 3：制作一个按钮组来填充列（带有插入符号按钮）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25289454/
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
Bootstrap 3: make a button group to fill column (with caret button)
提问by rnrneverdies
My goal is to fill a column with a couple of buttons. The first button has a text and should fill the remaining space in the column. The second is an icon. To be clear, that looks like an HTML select element with 'width: 100% ".
我的目标是用几个按钮填充一列。第一个按钮有一个文本，应该填充列中的剩余空间。第二个是图标。需要明确的是，这看起来像一个带有 'width: 100% ' 的 HTML 选择元素。
The solution should be responsive.
解决方案应该是响应式的。
HTML
HTML
<div class="row">
<div class="col-md-6">
<div class="btn-group">
<button type="button" class="btn btn-lg">
Select an Option
</button>
<button type="button" class="btn btn-lg">
<span class="caret"></span>
</button>
</div>
</div>
<div class="col-md-6">
Other assets
</div>
</div>
PLUNKER
普伦克
回答by Jordan.J.D
Without custom CSS, bootstrap uses a blocklevel button:
在没有自定义 CSS 的情况下，bootstrap 使用块级按钮：
those that span the full width of a parent— by adding .btn-block.
通过添加 .btn-block 跨越父级全宽的那些。
<div class="container">
<div class="row">
<div class="col-md-10">
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button<span class="caret pull-right"></span>
</button>
</div>
<div class="col-md-2">Other assets</div>
</div>
You will have to resize the caret icon though
不过，您必须调整插入符号图标的大小
回答by Jako
Here is what I would do:
这是我会做的：
Instead of playing with percentages, I would give full 100% to the first button. Then I would use the override the style of the "caret" button to absolute, and position it to the top right corner of the parent div (.btn-group). It will overlap the button and give the desired result
而不是玩百分比，我会给第一个按钮完全 100%。然后我将使用覆盖“插入符号”按钮的样式为绝对，并将其定位到父 div (.btn-group) 的右上角。它将与按钮重叠并给出所需的结果
http://plnkr.co/edit/Li2j9Q?p=preview
http://plnkr.co/edit/Li2j9Q?p=preview
<div class="row">
<div class="col-md-6">
<div class="btn-group">
<button type="button" class="btn btn-lg" style="width:100%;">
Select an Option
</button>
<button type="button" class="btn btn-lg" style="position:absolute;top:0;right:0;">
<span class="caret"></span>
</button>
</div>
</div>
<div class="col-md-6">
Other assets
</div>
</div>
回答by Evan
You could attack it two ways: Utilizing the floats, with percentage widths ( parent too ), adjusting accordingly so it adds up to 100%
您可以通过两种方式对其进行攻击：利用浮动百分比宽度（父级也是如此），相应地进行调整，使其加起来为 100%
http://embed.plnkr.co/5nDY9VIr6zTfu4PIHClZ/preview
http://embed.plnkr.co/5nDY9VIr6zTfu4PIHClZ/preview
OR
或者
You could have the larger button 100% and absolutely position the smaller toggle, but that could be tricky when scaling down.
您可以 100% 使用较大的按钮并绝对定位较小的开关，但这在缩小时可能会很棘手。
