twitter-bootstrap Twitter Bootstrap - 每列带有 FieldSet 的水平表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21088648/
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
Twitter Bootstrap - Horizontal Form with FieldSet Per Column
提问by emeraldjava
I have a form with two fieldsets and two elements in each set. I would like to layout the form so that each fieldset appears as a column.
我有一个包含两个字段集和每个集合中的两个元素的表单。我想对表单进行布局，以便每个字段集都显示为一列。
I came across this jsfiddlewhich shows a form with a single fieldset and five elements which are laid out in two columns but i've been unable to tweak my own form to render correctly.
我遇到了这个jsfiddle，它显示了一个带有单个字段集和五个元素的表单，这些元素排列在两列中，但我一直无法调整自己的表单以正确呈现。
Do i need to add specific class attributes to the fieldset element for bootstrap to handle them as a column?
我是否需要将特定的类属性添加到 fieldset 元素以便引导程序将它们作为列处理？
<div class="container">
<form class="form-horizontal">
<fieldset>
<legend>Portfolio A</legend>
<div class="col-xs-6">
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label A1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label A2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Portfolio B</legend>
<div class="col-xs-6">
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label B1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label B2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
回答by Surjith S M
You should add extra class to fieldsetand then change the class name of div inside it.
您应该添加额外的类fieldset，然后更改其中的 div 的类名。
Changed from this
从此改变
<fieldset>
<legend>Portfolio A</legend>
<div class="col-xs-6">
...
to this
对此
<fieldset class="col-xs-6">
<legend>Portfolio A</legend>
<div class="col-xs-12">
...
I have added col-xs-6to fieldset and col-xs-12to the inner div.
我已添加col-xs-6到字段集和col-xs-12内部 div。
回答by matthias
You are defining <fieldset>as surrounding block elements for your columns. That way column cascading won't work. Try it the more logical way: First define your column skeleton and inside of it, define your fieldsets.
您正在<fieldset>为列定义为周围的块元素。这样列级联将不起作用。以更合乎逻辑的方式尝试：首先定义您的列骨架，并在其中定义您的字段集。
<div class="container">
<form class="form-horizontal">
<div class="col-xs-6">
<fieldset>
....
This way it should work like you want it. Here's a quick jsfiddle.
这样它应该像你想要的那样工作。这是一个快速的jsfiddle。
