Question

我有一个bootstrap 3页面，显示两个并排排列的字段集。这些应该被井包围。

我发现我需要在最后一个字段集下面添加一个<div style='clear:both;'></div>，否则井的高度将只有一个在线。这将导致两个场集都溢出井底。

... Above well ...
<div class="well">
    <div class="form-horizontal">
        <fieldset class="col-sm-6">
            <legend>Form 1</legend>
            <div class="form-group">Form Group 1</div>
        </fieldset>
        <fieldset class="col-sm-6">
            <legend>Form 2</legend>
            <div class="form-group">Form Group 2</div>
        </fieldset>

        <div style='clear:both;'></div>

    </div>
</div>
... Below well ...

我很确定我在这里遗漏了一些东西。有没有更好的方法来修井？

更新

这是代码的fiddle，但不起作用。我想知道如何使井环绕两个场地集而不必添加＆＃34;清除：两者＆＃34;风格。

Answer 1

您需要将col-sm-6列包装在一行中。

<div class="well">
    <div class="form-horizontal">
        <div class="row">
            <fieldset class="col-sm-6">
                <legend>Form 1</legend>
                <div class="form-group">Form Group 1</div>
            </fieldset>
            <fieldset class="col-sm-6">
                <legend>Form 2</legend>
                <div class="form-group">Form Group 2</div>
            </fieldset>
       </div>
    </div>
</div>

http://jsfiddle.net/XmVFy/4/

Bootstrap 3字段集很好地溢出

1 个答案: