将.panel与FIELDSET结合使用.panel-heading与LEGEND结合使用时的设计问题

Question

For accessibility reasons I need to add fieldset and legend to Bootstrap's .panel element. But sadly, the legend can't be styled correctly anymore: the border around fieldset only comes to the middle height!

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

Anyone knows how to make the fieldset.panel-heading look exactly the same as the div.panel-heading ?

Answer 1

You can add float left to the legend tag. Since the width is already set to 100%, it should not cause any issues

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

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

I checked this on FF and Chrome on a Mac, seems fine. To get the spacing right for the body part, you could add a margin to the legend tag. For example

margin-bottom: 10px;

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

Answer 2

I attempted something similar yesterday. This post will probably have what you need.

Use Fieldset Legend with bootstrap