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)
任何帮助表示赞赏!
的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)