将 .panel 与 FIELDSET 和 .panel-heading 与 LEGEND 组合时的设计问题答案

【问题标题】：Design issues when combining .panel with FIELDSET and .panel-heading with LEGEND将 .panel 与 FIELDSET 和 .panel-heading 与 LEGEND 组合时的设计问题
【发布时间】：2015-05-29 07:49:22
【问题描述】：

出于可访问性的原因，我需要将 fieldset 和 legend 添加到 Bootstrap 的 .panel 元素。但遗憾的是，legend 无法再正确设置样式了：fieldset 周围的边框只达到了中间高度！

Codepen：http://codepen.io/jmuheim/pen/ByMVwY

任何人都知道如何使fieldset.panel-heading 看起来与div.panel-heading 完全相同？

【问题讨论】：

浮动legend标签codepen.io/anon/pen/LEqrBR

标签： html css twitter-bootstrap accessibility

【解决方案1】：

您可以向legend 标签添加左浮动。由于宽度已经设置为 100%，它应该不会导致任何问题

http://codepen.io/anon/pen/LEqrBR

legend.panel-heading {
    font-size: 14px;
    margin-bottom: 0;
    float: left;
}

我在 Mac 上的 FF 和 Chrome 上检查了这个，看起来不错。要使正文部分的间距正确，您可以在legend 标签中添加边距。例如

margin-bottom: 10px;

http://codepen.io/anon/pen/dPaKgv

【讨论】：

浮动图例元素意味着您不能使用左或右填充而不会出现溢出和清除问题。
@CChoma 可以使用填充，只需添加box-sizing: border-box 即可。见codepen.io/anon/pen/RNvBNQ使用方式没有任何清算问题

【解决方案2】：

我昨天尝试了类似的事情。这篇文章可能会有你需要的。

Use Fieldset Legend with bootstrap

【讨论】：