html - 按钮栏中的输入框

Question

我试图在 bootstrap 3 按钮栏中放置一个输入框，但它没有按预期对齐。

<div class="row">
    <div class="col-xs-12">
        <div class="btn-toolbar text-center">
            <div class="btn-group">
                   <div class="input-group col-xs-3">
                     <input type="text" class="form-control">
                     <span class="input-group-addon">$</span>
                   </div>
            </div>
            <div class="btn-group">
                <button class="btn btn-default">Button 1</button>
                <button class="btn btn-default">Button 2</button>
            </div>
        </div>
    </div>
</div>

如果我使用原始输入，它工作正常，但当我尝试使用输入组时，第二个 btn 组中的按钮向下移动到下一行。关于如何让它们出现在同一行的任何想法？

这是一个演示问题的 fiddle

http://jsfiddle.net/6XST2/

Answer 1

将 col 类设置为父元素 .btn-group。改变这个:

<div class="btn-group">
    <div class="input-group col-xs-3">

对此:

<div class="btn-group col-xs-3">
    <div class="input-group">

否则，btn-group 会填满整个宽度。
http://jsfiddle.net/6XST2/3/