html - 尽管内容不同，但如何确保 fieldset 元素在更大的视口(viewport)尺寸中都符合相同的高度？

Question

我在使用 Bootstrap 3.0.0 的单个 form 元素中有多个 fieldset 元素，因此我有三个不同的列。我同意表单以较小的视口(viewport)尺寸显示的方式。但是，我希望 fieldset 在视口(viewport)大小发生变化时始终彼此对齐。我并不一定要专门使用 Bootstrap 3.0.0。我在这里只是用它作为例子。 Here是我的 jsfiddle。一旦我开始在 fieldset 元素中使用 Bootstrap panel，我就觉得我走错了路。

实现与 Bootstrap 3.x+ 对齐的正确方法是什么？

Answer 1

上周解决了这个问题，但我想我会更新答案。 fieldset 元素在高度和宽度彼此一致的情况下不会真正“对齐”，因为当内容更改时，fieldset 大小也会更改。实现此效果的更好方法是移除每个 fieldset 周围的边框，并将所有内容包含在 Bootstrap“container-fluid”div 中。然后可以堆叠其他“container-fluid”div 元素，以便它们的包含 fieldset 元素排成一行。

移除每个字段集周围的边框

fieldset.fs-border {
    border: 1px groove #ddd;
    ...
}

删除对 panel 类的引用(不确定我为什么首先添加它。如果我想包装所有 fieldset，使用 panel 更有用 元素在可折叠的 panel 中，例如。):

    <fieldset class="col-sm-4 panel panel-primary fs-border">
        <legend class="panel-heading legend-border">Primary Contact</legend>

使用 display:table，删除边框，并在包含 div 引用的类中指定它。

.wide-container {
    display: table;
    background-color:#d7e0e2;
    border: none;
    width: 100%;
}

如果您想堆叠“组”字段集元素，则所有 fieldset 元素都将包含在该 div 中。它们的边界看起来都是统一排列的:

<div id="fieldsetGroup2" class="wide-container container-fluid">
    <fieldset id="fieldset1" ...>
    </fieldset>
    <fieldset id="fieldset2" ...>
    </fieldset>
    ...
</div>
<div id="fieldsetGroup2" class="wide-container container-fluid">
    <fieldset id="fieldset3" ...>
    </fieldset>
    <fieldset id="fieldset4" ...>
    </fieldset>
    ...
</div>

container-fluid 将使内容跨越 div 中包含的整个区域。