引导表单-组间距
引导表单-组间距
提问于 2014-05-13 00:33:49
我希望控件之间有一些间距。根据规范，应该使用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>回答 2
Stack Overflow用户
回答已采纳
发布于 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>
Stack Overflow用户
发布于 2014-05-13 00:49:37
我更新了你的小提琴，还添加了一个textarea类。更新的fiddle
您需要使用CSS来设置输入字段的下边距
input[type=text], .txtarea{
margin-bottom: 10px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23614338
复制相关文章
相似问题