我希望控件之间有一些间距。根据规范,应该使用form-group类来实现。然而,它在我的情况下不起作用。
<div class="col-xs-12 col-sm-12">
<form role="form">
<div class="form-group">
<div class="col-xs-3 text-right">
<label for="cpTitle">Title</label>
</div>
<div class="col-xs-9">
<input type="text" class="form-control" placeholder="Title of the program" id="cpTitle" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
<label for="cpDesc">Description</label>
</div>
<div class="col-xs-9">
<textarea class="form-control" rows="3" placeholder="Description of the program" id="cpDesc"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
<label for="cpAddr">Program address</label>
</div>
<div class="col-xs-9">
<input type="text" class="form-control" placeholder="Name of Facility" id="cpAddr" />
<input type="text" class="form-control" placeholder="Street 1" />
<input type="text" class="form-control" placeholder="Street 2" />
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="State" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="City" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Zip" />
</div>
</div>
</div>
</form>
</div>
发布于 2014-05-13 00:57:46
主要的问题是要确保你在你的表单上设置了" form -horizontal“类。对于程序地址字段,您可以为每个字段设置单独的行,或者我建议只在每个输入字段上为边距-底部添加一个css。上面编辑过的jsfiddle
.margin-bottom {
margin-bottom:15px;}
<div class="col-xs-12 col-sm-12">
<form role="form" class='form-horizontal'>
<div class="form-group">
<div class="col-xs-3 text-right">
<label for="cpTitle">Title</label>
</div>
<div class="col-xs-9">
<input type="text" class="form-control" placeholder="Title of the program" id="cpTitle" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
<label for="cpDesc">Description</label>
</div>
<div class="col-xs-9">
<textarea class="form-control" rows="3" placeholder="Description of the program" id="cpDesc"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
<label for="cpAddr">Program address</label>
</div>
<div class="col-xs-9">
<input type="text" class="form-control margin-bottom" placeholder="Name of Facility" id="cpAddr" />
<input type="text" class="form-control margin-bottom" placeholder="Street 1" />
<input type="text" class="form-control margin-bottom" placeholder="Street 2" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right"> </div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="State" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="City" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="Zip" />
</div>
</div>
</form>
发布于 2014-05-13 00:49:37
我更新了你的小提琴,还添加了一个textarea类。更新的fiddle
您需要使用CSS来设置输入字段的下边距
input[type=text], .txtarea{
margin-bottom: 10px;
}
https://stackoverflow.com/questions/23614338
复制相似问题