Bootstrap 3.2：表单中同一行的按钮组和输入组

Question

当使用 Bootstrap 3.2 时，我想逐行创建一个 8 列宽的表单（col-sm-8，因此全宽，小分辨率）：

• 8 列宽度为 100% 的输入表单
• 一个单选按钮组，后面是一个输入组，其中输入组的文本框占据剩余的整个宽度，这样按钮组和输入组的大小就与第一行相同

我无法创建这个，因为我的输入组将移动到下一行和/或不会填满整个宽度。如何实现这一点？

<div class="container">
    <form role="form">
        <div class="row">
            <div class="col-sm-8">
                <div class="form-group">
                    <label class="control-label sr-only" for="input_1">Input 1</label>
                    <input type="text" class="form-control" id="input_1" placeholder="Input 1">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <div class="form-group">
                    <label class="control-label sr-only" for="input_2">Input 2</label>
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default active">
                        <input type="radio" name="options" id="option1" checked>Opt1</label>
                        <label class="btn btn-default">
                        <input type="radio" name="options" id="option2">Opt2</label>
                    </div>
                    <div class="input-group" style="vertical-align: middle;">
                        <span class="input-group-btn" style="width: auto;">
                            <button type="button" class="btn btn-default">Button</button> 
                        </span>
                        <!-- /btn-group -->
                        <input type="text" class="form-control" id="input_2" placeholder="Input 2">
                    </div>
                    <!-- /input-group -->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </form>
</div>

另请参阅我的JSFiddle。

非常感谢您的回复！

Answer 1

我想我已经回答了我自己的问题，通过添加

float: left;
margin-right: 10px;

到表单组，并且

overflow: hidden

到按钮组。

我也不得不删除

width: auto;

来自输入组-btn。

详情见http://jsfiddle.net/00gcsk90/6/

Answer 2

希望对你有所帮助。

<div class="container">
<form role="form">
    <div class="row">
        <div class="col-xs-8">
            <div class="form-group">
                <label class="control-label sr-only" for="input_1">Input 1</label>
                <input type="text" class="form-control" id="input_1" placeholder="Input 1">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3">
            <div class="form-group">
                <label class="control-label sr-only" for="input_2">Input 2</label>
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default active">
                        <input type="radio" name="options" id="option1" checked>Opt1</label>
                    <label class="btn btn-default">
                        <input type="radio" name="options" id="option2">Opt2</label>
                </div>
            </div>

        </div>
        <div class="col-xs-5">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default col-xs-12">Button</button>
                    </span>
                    <input type="text" class="form-control" id="input_2" placeholder="Input 2">
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-sm-8">
            <div class="form-group">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</form>

JSFiddle