Question

我正在尝试创建一个包含输入组的表单。我使用'col'-class of bootstrap来设置样式，但是当它与'input-group'类结合使用时，列的填充将被删除。

我希望将日期和名称输入字段对齐。

Here是我的JSFiddle

HTML

<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Date</label>
        <div class="col-sm-4 col-xs-4 input-group">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Name</label>
        <div class="col-sm-4 col-xs-4">
            <input type="text" class="form-control" />
        </div>
    </div>
</div>
<br><br>
<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Date</label>
        <div class="col-sm-4 col-xs-4">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Name</label>
        <div class="col-sm-4 col-xs-4">
            <input type="text" class="form-control" />
        </div>
    </div>
</div>

感谢任何帮助！

Answer 1

input-group类不应与其他任何类合并，如示例中所示（http://getbootstrap.com/components/#input-groups）：

<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            [...]
        </div>
    </div>
</div>

试试这个：

<div class="form-group">
    <label class="col-sm-2 col-xs-2 control-label">Date</label>
    <div class="col-sm-4 col-xs-4">
        <div class="input-group">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

Bootstrap输入组从col-XX-X中删除填充

1 个答案: