Question

我的目标是用几个按钮填充一列。第一个按钮有一个文本，应该填充列中的剩余空间。第二个是图标。要清楚，这看起来像是一个HTML选择元素，宽度为：100％＆＃34;。

解决方案应该是敏感的。

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

http://plnkr.co/edit/NezDJL?p=preview

Answer 1

如果没有自定义CSS，bootstrap会使用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>

您必须通过

调整插入符号图标的大小

BOOTPLY

Answer 2

以下是我要做的事情：

我没有玩百分比，而是给第一个按钮100％。然后我会使用覆盖＆＃34;插入符号的样式。按钮到绝对，并将其定位到父div（.btn-group）的右上角。它将与按钮重叠并给出所需的结果

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>

Answer 3

您可以通过两种方式攻击它：使用浮点数，百分比宽度（父级也是如此），相应调整以使其累加到100%

http://embed.plnkr.co/5nDY9VIr6zTfu4PIHClZ/preview

或

您可以将较大的按钮设置为100％并绝对定位较小的切换按钮，但在缩小时可能会非常棘手。

Bootstrap 3：创建一个按钮组来填充列（带有插入按钮）

3 个答案: