twitter-bootstrap 用于组合垂直/内联字段的 Bootstrap 复杂表单布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27825134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap complex form layout for combined vertical/inline fields
提问by Michael Doleman
I'm very new to Bootstrap but growing fast in my skill and also appreciation for it. I have a need to build a fairly complex page that will contain a lot of form elements, including multiple address fill-in components. I've attached here an image of the basic design that I am aiming for, and can't seem to achieve it with the basic form design elements available to me. I feel like my approach is getting "out of control" in the sense that I've got too many nesting levels and not enough understanding of what I'm actually doing. So rather than post the code I've got so far, can anyone give me a simplified example of how my design might be achieved?
我对 Bootstrap 很陌生，但我的技能增长很快，并且对它表示赞赏。我需要构建一个相当复杂的页面，其中将包含很多表单元素，包括多个地址填充组件。我在此处附上了我所针对的基本设计的图像，但似乎无法使用我可用的基本表单设计元素来实现它。我觉得我的方法正在“失控”，因为我有太多的嵌套级别并且对我实际在做什么没有足够的理解。因此，与其发布我到目前为止的代码，谁能给我一个简化的示例，说明如何实现我的设计？
My dotted-line rectangles represent the fact that my page should have a two-column display, with most of the form elements off to the wider RH side. And then, within that column, my form has some additional levels of complexity. There are many additional form elements that I'm not even showing here, and that's my main reason for wanting to design it this way--because I need to save on vertical screen real estate as much as possible.
我的虚线矩形代表这样一个事实，即我的页面应该有一个两列显示，大多数表单元素都放在更宽的 RH 侧。然后，在该列中，我的表单具有一些额外的复杂级别。有许多额外的表单元素我什至没有在这里展示，这就是我想以这种方式设计它的主要原因——因为我需要尽可能多地节省垂直屏幕的空间。
Thanks for your help.
谢谢你的帮助。
采纳答案by Ales Maticic
You should use http://getbootstrap.com/css/#gridfor this.
您应该为此使用http://getbootstrap.com/css/#grid。
A simple sample from me. Hope this will help you understand the concept.
来自我的一个简单示例。希望这能帮助你理解这个概念。
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-3">
Left side for labes
</div>
<div class="col-md-9">
Right side for forms
<div class="row">
<div class="col-md-12">
longer forms
</div>
</div>
<div class="row">
<div class="col-md-3">
shorter forms
</div>
<div class="col-md-3">
shorter forms
</div>
<div class="col-md-3">
shorter forms
</div>
<div class="col-md-3">
shorter forms
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
Right panel with instructions
</div>
</div>
回答by Christina
Certain types of forms are complicated with and without Bootstrap. There is no complete out of the box solution for your form. You would combine Bootstrap with custom CSS and use nesting. The "easiest" way is to do each chunk, indent, comment and so forth. Be very detail oriented.
某些类型的表单在使用和不使用 Bootstrap 时都很复杂。对于您的表单，没有完整的开箱即用的解决方案。您可以将 Bootstrap 与自定义 CSS 结合使用并使用嵌套。“最简单”的方法是执行每个块、缩进、注释等。非常注重细节。
This is an example of the more annoying section of the form image you have, which is three nested columns inside the second column. I adjust all my forms that are similar to this to use percentage gutters inside the nested .form-group (which acts like a .row) as the 30px gutter for this is too big. Understanding the grid system, not just using it, will help you get more out of Bootstrap.
这是您拥有的表单图像中更烦人的部分的示例，它是第二列内的三个嵌套列。我调整了所有与此类似的表单，以在嵌套的 .form-group（其作用类似于 .row）中使用百分比装订线，因为 30px 装订线太大了。了解网格系统，而不仅仅是使用它，将帮助您从 Bootstrap 中获得更多收益。
DEMO: https://jsbin.com/sejemi
演示：https: //jsbin.com/sejemi
CSS:
CSS：
/* ---- text-align right the .control-label until 699px MAX width -----*/
@media (max-width:767px) {
.form-custom .control-label { text-align: right }
}
@media (max-width:699px) {
.form-custom .control-label {
width: 100%;
text-align: left;
}
.form-custom .payment-inputs { width: 100% }
.form-custom .submit-form { margin-left: 0 }
}
/* ----------- adjusted nested columns grid and gutters ----------- */
.form-custom .form-group [class*="col-"] .form-group [class*="col-"] {
padding-left: 1%;
padding-right: 1%;
}
.form-custom .form-group [class*="col-"] .form-group {
margin-left: -1%;
margin-right: -1%;
}
.form-custom .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) { margin-bottom: 5px }
@media (min-width:768px) {
.form-custom .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) { margin-bottom: 0 }
}
HTML
HTML
<div class="container">
<form class="form-horizontal form-custom">
<!-- BEGIN form-group line-1 -->
<div class="form-group">
<label class="col-sm-4 control-label">Words Go Here</label>
<div class="col-sm-8">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">Line 1</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
</div>
<!-- /.col-sm-8 -->
</div>
<!-- /.form-group -->
<!-- END form-group line-1 -->
<!-- BEGIN form-group city-state-zip -->
<div class="form-group">
<div class="col-sm-8 col-sm-offset-4">
<div class="form-group">
<!-- acts as .row -->
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">City</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<!-- /.input-group -->
</div>
<!-- /.col-sm-5 (nested) -->
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">State</span>
<input type="text" class="form-control" placeholder="State" aria-describedby="sizing-addon2">
</div>
<!-- /.input-group -->
</div>
<!-- /.col-sm-3 (nested) -->
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">Zip</span>
<input type="text" class="form-control" placeholder="Zip" aria-describedby="sizing-addon2">
</div>
<!-- /.input-group -->
</div>
<!-- /.col-sm-4 (nested) -->
</div>
<!-- /.form-group (nested) -->
</div>
<!-- /.col-sm-8 .col-sm-offset-4 -->
</div>
<!-- /.form-group -->
<!-- END form-group city-state-zip -->
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-default">Button</button>
</div>
<!-- /col-sm-offset-4.col-sm-8 -->
</div>
<!-- /.form-group -->
</form>
</div> <!-- /.container -->
回答by indubitablee
you should look into bootstrap horizontal forms: http://getbootstrap.com/css/#forms-horizontal
你应该研究引导水平形式：http: //getbootstrap.com/css/#forms-horizontal
heres a demo of what youre looking for using bootstrap horizontal forms: http://jsfiddle.net/swm53ran/31/(this demo also shows the responsive capabilities of bootstrap)
继承人你正在寻找什么的演示使用引导水平形式：http: //jsfiddle.net/swm53ran/31/（这个演示还展示了引导的响应能力）
essentially, you want to combine bootstraps grid system with bootstraps horizontal forms.
本质上，您希望将引导程序网格系统与引导程序水平形式结合起来。
<div class="col-xs-8">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email"/>
</div>
</div>
</form>
</div>
<div class="col-xs-4">
Some other Elements and Instruction Goes Here
</div>
hope this helps!
希望这可以帮助！
回答by Mark C.
If you want to combine vertical and inline groups you should try the following hope it helps
如果你想结合垂直和内联组，你应该尝试以下希望它有帮助
<div class="row">
<div class="col-sm-6">
<form class="form-horizontal" role="form" method="POST">
<div class="form-group">
<label for="line1" class="col-sm-2 control-label">Location Address</label>
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">Line 1</span>
<input type="text" class="form-control" aria-describedby="basic-addon1" name='line1'>
</div>
</div>
<div class="form-group">
<div class="input-group col-sm-10 col-sm-offset-2"> <span class="input-group-addon" id="basic-addon1">Line 2</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<div class="input-group col-sm-10 col-sm-offset-2"> <span class="input-group-addon" id="basic-addon1">PO Box</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
<div class="row">
<div class="col-sm-5 col-sm-offset-2">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">City</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-sm-2">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">State</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-sm-3">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">Zip</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</form>
</div>
<div class="col-sm-6">Here is the second column</div>
</div>
You can see the result here http://jsfiddle.net/a2Lech1u/3/
你可以在这里看到结果http://jsfiddle.net/a2Lech1u/3/
