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;

来自input-group-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

Bootstrap 3.2：按钮组和输入组在表格的同一行

2 个答案: