带有标签的Twitter Bootstrap 3内联表单
带有标签的Twitter Bootstrap 3内联表单
提问于 2014-02-21 13:35:20
在搜索各地之后，我无法确切地看到如何设计具有以下设计的内联表单：(在可能的情况下使用引导程序3类而不是css自定义)
当用户有宽屏幕时：
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB LabelFieldC: InputFieldC <Submit Button>当用户有较小的屏幕时：
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB
LabelFieldC: InputFieldC <Submit Button>设计最初将所有字段放在一行中，如果不适合，控件将跳转到下一行，但将标签+字段放在一起。
另外，如果有一种方法，那么每个标签+输入之间的间隔要大于标签与其字段之间的间隔。
最后，如果有一种方法在标签+字段之间有更多的垂直边距，当它跳到下一行时。
回答 6
Stack Overflow用户
回答已采纳
发布于 2014-02-24 10:17:08
选项1:固定列
可以使用混合col-xs-12、col-sm-6和col-lg-3的结构来获得1、2或4列。在您的form-group中，请记住使用col-xs-4和col-xs-8修复标签/输入大小：
<div class="container">
<form class="form form-inline" role="form">
<legend>Form legend</legend>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldA" class="col-xs-4">Field A</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldB" class="col-xs-4">Field B</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldC" class="col-xs-4">Field C</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
</div>
</form>
</div>您仍然需要一些CSS：
// get a larger input, and align it with submit button
.form-inline .form-group > div.col-xs-8 {
padding-left: 0;
padding-right: 0;
}
// vertical align label
.form-inline label {
line-height: 34px;
}
// force inline control to fit container width
// http://getbootstrap.com/css/#forms-inline
.form-inline .form-control {
width: 100%;
}
// Reset margin-bottom for our multiline form
@media (min-width: 768px) {
.form-inline .form-group {
margin-bottom: 15px;
}
}您可以添加任意多的输入。
引线
备选案文2:流体柱
若要不考虑每行字段的数目，可以使用以下结构：
<div class="container">
<form class="form form-inline form-multiline" role="form">
<legend>Form legend</legend>
<div class="form-group">
<label for="InputFieldA">Field A</label>
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
<div class="form-group">
<label for="InputFieldB">Very Long Label For Field B</label>
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
<div class="form-group">
<label for="InputFieldC">F. C</label>
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
<div class="form-group">
<label for="InputFieldD">Very Long Label For Field D</label>
<input type="text" class="form-control" id="InputFieldD" placeholder="InputFieldD">
</div>
<div class="form-group">
<label for="InputFieldE">Very Long Label For Field E</label>
<input type="text" class="form-control" id="InputFieldE" placeholder="InputFieldE">
</div>
<div class="form-group">
<label for="InputFieldF">Field F</label>
<input type="text" class="form-control" id="InputFieldF" placeholder="InputFieldF">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit Button</button>
</div>
</form>
</div>还有几行CSS代码来修复边距：
.form-multiline .form-group {
margin-bottom: 15px;
margin-right: 30px;
}
.form-multiline label,
.form-multiline .form-control {
margin-right: 15px;
}
引线
Stack Overflow用户
发布于 2015-08-06 18:12:00
与@zessx中的选项1相同，但没有覆盖CSS。这一条还将标签对齐到右边，以增加标签控制对之间的空间.类"media“是在不创建自定义类的情况下添加上限的，但通常情况下，最好有一个自定义类。
<div class="form-horizontal">
<legend>Form legend</legend>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldA" class="control-label text-right col-xs-4">Field A</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldB" class="control-label text-right col-xs-4">Field B</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldC" class="control-label text-right col-xs-4">Field C</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
</div>
</div>引线
Stack Overflow用户
发布于 2014-02-28 00:56:39
我会提出完全不同的建议，将标签和字段封装在内联div中：
<div style="display:inline-block">
Label:input
</div>这样，当他们要打破，他们打破成对，labels+inputs。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21935933
复制相关文章
相似问题
腾讯云开发者
