如何将输入与同一行中的复选框(右拉)对齐?

时间:2015-03-17 22:34:35

标签: css twitter-bootstrap twitter-bootstrap-3

我在同一行和列中有一个文本输入和一个复选框。如果我在复选框中添加右拉类,如何用文本输入填充左侧的剩余空间?我使用的是Bootstrap 3。

<div class="checkbox i-checks pull-right">
                <label> <input type="checkbox" >
                    <i></i> Fixed width label
                </label>
</div>

<input class="form-control">

1 个答案:

答案 0 :(得分:4)

http://jsfiddle.net/snlacks/togpvwwk/

这是内置于Bootstrap CSS中的。 http://getbootstrap.com/components/#input-groups-checkboxes-radios

使用输入组,并使用input-group-addon。在input-groupd内部输入之前或之后。

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <label for="input_name">My field</label>
            <div class="input-group">
                <input type="text" name="input_name" class="form-control" aria-label="..." placeholder="Text on left, check over there ==>"> 
                <span class="input-group-addon">
                    <label>
                    <input type="checkbox" aria-label="Over here on the right">
                        Title Label
                    </label>
                </span>
            </div>
            <!-- /input-group -->
        </div>
        <!-- /.col-lg-6 -->
    </div>
    <!-- /.row -->
</div>