我有一个表单，其中包含两个字段集，每个字段集包含两个元素。我想布局表单，以便每个字段集显示为一列。

我遇到了这个 jsfiddle它显示了一个具有单个字段集和五个元素的表单，这些元素分布在两列中，但我无法调整我自己的表单以正确呈现。

我是否需要将特定的类属性添加到 fieldset 元素以便 Bootstrap 将它们作为列处理？

<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> 

请您参考如下方法:

你应该在 fieldset 中添加额外的类，然后更改其中的 div 的类名。

Working Demo

从此改变

<fieldset> 
        <legend>Portfolio A</legend> 
        <div class="col-xs-6"> 
        ... 

对此

   <fieldset class="col-xs-6"> 
        <legend>Portfolio A</legend> 
        <div class="col-xs-12"> 
        ... 

我已将 col-xs-6 添加到 fieldset 并将 col-xs-12 添加到内部 div。