在任何地方搜索之后,我无法确切地看到我如何设计具有以下设计的内联表单:(尽可能使用引导3类而不是CSS自定义)
当用户有宽屏幕时:
Form-Legend LabelFieldA: InputFieldA LabelFieldB: InputFieldB LabelFieldC: InputFieldC <Submit Button>
当用户屏幕较小时:
Form-Legend LabelFieldA: InputFieldA LabelFieldB: InputFieldB LabelFieldC: InputFieldC <Submit Button>
这个想法是,设计最初将所有字段放在一行中,如果它不适合,则控件将跳转到下一行,但将标签字段保持在一起。
另外,如果有一种方式,每个Label Input之间的间距大于Label和它的Field之间的间距。
解决方法
选项#1:固定列
您可以使用混合col-xs-12,col-sm-6和col-lg-3的结构获得1,2或4列。在您的表单组中,请记住使用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; }