Bootstrap按钮定位

Question

我有这个Bootstrap HTML标记：

<div class="container">
    <div class="field col-md-6 col-md-offset-3">
        <button type="button" class="btn btn-block btn-primary">Large button</button>
        <button type="button" class="btn btn-primary">X</button>
    </div>
</div>

我希望大按钮填充列（col-md-6），因此我使用了btn-block。但我希望X按钮在同一行中浮动，占用大按钮的宽度。

X按钮应保持较小，大按钮应填满宽度的其余部分。

我该怎么做？

请参阅my JSFiddle。

Answer 1

您需要使用输入组将所有内容保持在一起。

http://getbootstrap.com/components/#input-groups

  

通过在之前，之后或之前添加文本或按钮来扩展表单控件   任何基于文本的双方。使用.input-group和   .input-group-addon将元素前置或附加到单个元素   .FORM控制。

     

输入组中的按钮略有不同，需要一个额外的按钮   嵌套水平。而不是.input-group-addon，你需要使用   .input-group-btn来包装按钮。由于默认情况，这是必需的   无法覆盖的浏览器样式。

这是我对你的小提琴的修改。 http://jsfiddle.net/oayw7uhh/5/

您需要做的就是用input-group-div

包围这两个元素

然后，将X按钮包含在类input-group-btn。

的范围内

https://jsfiddle.net/dennismadsen/oayw7uhh/

您完成的代码是

<div class="container">
    <div class="field col-md-6 col-md-offset-3">
        <div class="input-group">
            <button type="button" class="btn btn-block btn-primary">Large button</button>
            <span class="input-group-btn">
                 <button type="button" class="btn btn-primary">X</button>
            </span>
        </div>
    </div>
</div>