Bootstrap 3:创建一个按钮组来填充列(带有插入按钮)

rnr*_*ies 4 css twitter-bootstrap twitter-bootstrap-3

我的目标是用几个按钮填充一列.第一个按钮有一个文本,应该填充列中的剩余空间.第二个是图标.要清楚,它看起来像一个HTML宽度:100%的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>
Run Code Online (Sandbox Code Playgroud)

PLUNKER

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

Jor*_*J.D 9

没有自定义CSS,bootstrap使用级按钮:

那些跨越父级的全宽 - 通过添加.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>
Run Code Online (Sandbox Code Playgroud)

您必须调整插入符号图标的大小

BOOTPLY