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

Bra*_*mmz 3 html css twitter-bootstrap

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

我想将日期和名称输入字段对齐.

是我的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>
Run Code Online (Sandbox Code Playgroud)

任何帮助表示赞赏!

Ale*_*tan 6

input-group类不应与任何其他组合,如在它们的例子(指示http://getbootstrap.com/components/#input-groups):

<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            [...]
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

试试这个:

<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>
Run Code Online (Sandbox Code Playgroud)