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

时间:2014-09-09 20:31:54

标签: css twitter-bootstrap

使用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

非常感谢回复!

2 个答案:

答案 0 :(得分:1)

猜猜我已经回答了我自己的问题,加上

float: left;
margin-right: 10px;

到表单组,

overflow: hidden

到按钮组。

我还必须删除

width: auto;

来自input-group-btn。

有关详细信息,请参阅http://jsfiddle.net/00gcsk90/6/

答案 1 :(得分:0)

我希望这有帮助。

<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