Question

请考虑以下代码：

<div class="col-xxs-12">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default" tabindex="-1"><i class="icon-location-arrow"></i></button>
            <button type="button" class="btn btn-default" tabindex="-1"><i class="icon-search"></i></button>
        </div>
    </div>
            <button type="button" class="btn btn-default" tabindex="-1"><i class="icon-reorder"></i></button>
</div>

这会生成一个表单输入，并在末尾附加一个按钮组。然后它会呈现第三个单独的按钮：http://bootply.com/79114

问题：阻止第三个按钮包裹到新线路上的最简洁方法是什么？我希望输入组（文本输入和两个按钮）按原样显示并占用剩余宽度的100％，但要将第三个按钮放在同一行上。 Float:right.

编辑为避免疑问，我希望在input-group

之外单独设置第三个按钮的样式

Answer 1

将此添加到第三个按钮

<div style="display:table-cell;width:1%">   <button type="button" class="btn btn-default" tabindex="-1"><i class="icon-reorder"></i></button></div>

Demo

如何阻止按钮换行到输入组外的新行

1 个答案: