- 首页
- 前端开发
- 带有标签的 Twitter Bootstrap 3 内联表单
带有标签的 Twitter Bootstrap 3 内联表单
[英] Twitter Bootstrap 3 Inline Form with labels
本文介绍了带有标签的 Twitter Bootstrap 3 内联表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
到处搜索后，我无法确切地看到如何设计具有以下设计的内联表单:(尽可能使用 bootstrap 3 类而不是 css 自定义)
当用户拥有宽屏时:
表单图例LabelFieldA: InputFieldA LabelFieldB: InputFieldB LabelFieldC: InputFieldC <提交按钮>
当用户的屏幕较小时:
Form-Legend标签字段A:输入字段A 标签字段B:输入字段BLabelFieldC: InputFieldC <提交按钮>
这个想法是设计最初将所有字段放在一行中，如果它不适合控件将跳到下一行，但将标签 + 字段保持在一起.
另外，如果有办法让每个标签 + 输入之间的间距大于标签与其字段之间的间距.
最后，如果有一种方法可以在跳转到下一行时在标签 + 字段之间有更多的垂直边距.
解决方案
选项 #1:固定列
您可以使用混合 col-xs-12、col-sm-6 和 col-lg-3 的结构得到 1, 2 或 4 列.在你的 form-group 中，记得用 col-xs-4 和 col-xs-8 固定标签/输入大小:
<form class="form form-inline" role="form"><legend>表格图例</legend><div class="form-group col-xs-12 col-sm-6 col-lg-3"><label for="InputFieldA" class="col-xs-4">字段A</label><div class="col-xs-8"><input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
<div class="form-group col-xs-12 col-sm-6 col-lg-3"><label for="InputFieldB" class="col-xs-4">字段B</label><div class="col-xs-8"><input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
<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 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">提交按钮</button>
</表单>
你仍然需要一些 CSS :
//获取更大的输入，并与提交按钮对齐.form-inline .form-group >div.col-xs-8 {填充左:0;填充右:0;}//垂直对齐标签.form-内联标签{行高:34px；}//强制内联控件适应容器宽度//http://getbootstrap.com/css/#forms-inline.form-inline .form-control {宽度:100%；}//为我们的多行表单重置 margin-bottom@media(最小宽度:768px){.form-inline .form-group {底边距:15px；}}
您可以根据需要添加任意数量的输入.
After searching everywhere i couldnt see exactly how i can design an inline form that has the following design: (using bootstrap 3 classes instead of css customizations when possible)
When the user has a wide screen:
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB LabelFieldC: InputFieldC <Submit Button>
When the user has a smaller screen:
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB
LabelFieldC: InputFieldC <Submit Button>
The idea is that the design initially puts all the fields in one line and if it doesnt fit the controls would jump to the next line, but maintaining the Label + Field together.
Also if there is a way so the spacing between each Label + Input is greater than the spacing between the Label and its Field.
And lastly if there is a way of having more vertical margin between the Label + Field when it jumps to the next line.
解决方案
Option #1 : fixed columns
You can use a structure mixing col-xs-12, col-sm-6 and col-lg-3 to get 1, 2 or 4 columns. Inside your form-group, remember to fix label/input sizes with col-xs-4 and 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>
You still need a few 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;
}
}
You can add as many inputs as you want.
Bootply
Option #2 : fluid columns
To be able to not care of the number of fields per row, you can use this structure :
<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>
And a few CSS lines to fix margins :
.form-multiline .form-group {
margin-bottom: 15px;
margin-right: 30px;
}
.form-multiline label,
.form-multiline .form-control {
margin-right: 15px;
}
Bootply
这篇关于带有标签的 Twitter Bootstrap 3 内联表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
