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

Design issues when combining .panel with FIELDSET and .panel-heading with LEGEND

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

代码笔:http://codepen.io/jmuheim/pen/ByMVwY

谁知道如何使 fieldset.panel-heading 看起来与 div.panel-heading 完全一样?

我昨天尝试了类似的东西。这个post可能有你需要的。

Use Fieldset Legend with bootstrap

您可以向 legend 标签添加左浮动。由于宽度已设置为 100%,因此应该不会造成任何问题

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

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

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

margin-bottom: 10px;

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