Bootstrap - Hinzufügen von Legende zu Well

Question

Ich benutze derzeit Twitter Bootstrap, das funktioniert gut, aber ich würde gerne eine Legende zu den "Brunnen" Elemente hinzufügen, die in einem Formular verwendet werden (so dass ich mehrere Brunnen haben kann, Unterabschnitte auf einem Formular).

Ein Beispiel dafür, was meine Form aussieht sind jetzt:

Ich mag würde eine Legende hinzufügen, so dass ich zwei separate Abschnitte unter „Details“ haben kann Überschrift, zum Beispiel, aber in der Lage sein zu bezeichnen, wofür sie sind. Eine Legende scheint der beste Weg, dies zu tun.

Der entsprechende Abschnitt des html wie folgt aussieht:

<form> 
    <div class="row"> 
     <div class="span6"> 
     <div class="nonboxy-widget"> 
      <div class="widget-head"> 
       <h5>Details</h5> 
      </div> 
      <div class="widget-content"> 
       <div class="widget-box"> 
        <div class = 'form-horizontal well'> 
         <fieldset> 
          <div class="control-group"> 
           <label class="control-label">Sale Type</label> 
           <div class="controls"> 

Wenn ich eine Legende Tag hinzuzufügen versuchen, entweder die Fieldset oder div mit Klasse form-horizontal well es wie eine Überschrift in der Box macht, nicht mögen normale HTML-Legende. Es macht wie:

mit dem Code

<div class = 'form-horizontal well'> 
    <fieldset> 
    <legend>Details</legend> 
    <div class="control-group"> 

kann einen Weg jeder empfehlen, diese wie eine normale Legende zu machen zu bekommen, an der Grenze der Box?

EDIT: Dank den Code von Simbirsk, ich habe jetzt:

Diese ziemlich nahe ist, aber was ich wollte, war die Legende wie eine normale HTML-Legende aussehen habe auf einem fieldset (dh für sie in der Grenze) zu sitzen, so änderte ich die CSS:

legend { 
padding: 0; 
margin-left: 10px; 
margin-bottom: -9px; 
border: 0; 
color: #999999; 
background-color: #333333; 
} 

aber das führte dies:

Wie kann ich sicherstellen, dass die Umrandung des Wells "bricht" (wird nicht hinter dem Text angezeigt) wie eine normale Feldsatzlegende?

EDIT 2: die Bearbeitung auf der ersten Antwort Folgen, bewarb ich mich um den Code zu meinem CSS und endete mit:

Sie werden feststellen, das nicht ganz ist, was ich gesucht habe - ich Ich versuche, die Legende auf den Rand des Well-Div zu bekommen, nicht auf das Fieldset selbst (da dies eine verschachtelte Form ist, könnte es mehrere Fieldsets innerhalb eines Wells geben, so dass ich den Rand nicht auf das Fieldset selbst setzen kann).

Ich schien dies mit dem obigen Code erreicht zu haben, das einzige Problem war eine Pause in der Grenze, wo die Legende ist - kann dies mit einer gewissen Opazität auf den Hintergrund der Legende Text getan werden, und ein bisschen von Polsterung?

Weitere Vorschläge?

Danke!

Answer 1

Setzen Sie die .well auf der fieldset und außer Kraft setzen legend und fieldset Stile des Bootstrap.
HTML

<form> 
    <fieldset class="well the-fieldset"> 
     <legend class="the-legend">Your legend</legend> 
     ... your inputs ... 
    </fieldset> 
</form> 

CSS

.the-legend { 
    border-style: none; 
    border-width: 0; 
    font-size: 14px; 
    line-height: 20px; 
    margin-bottom: 0; 
} 
.the-fieldset { 
    border: 2px groove threedface #444; 
    -webkit-box-shadow: 0px 0px 0px 0px #000; 
      box-shadow: 0px 0px 0px 0px #000; 
} 

HINWEIS: Ich habe Bootstrap-Klassen wie Reihen ommited, Spannweiten, Kontrollen, etc. Verwenden Sie Ihr Layout passen.
BEARBEITEN: Geänderter Code zum Einschließen fieldset Stile "reset".

Answer 2

Dies funktionierte für mich in dem, was ich versuchte, als eine Gruppe in Bootstrap zu erreichen.

fieldset { 
 
    min-width: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
} 
 
.well { 
 
    min-height: 20px; 
 
    padding: 19px; 
 
    margin-bottom: 20px; 
 
    background-color: #f5f5f5; 
 
    border: 1px solid #e3e3e3; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); 
 
} 
 
.well-legend { 
 
    display: block; 
 
    font-size: 14px; 
 
    width: auto; 
 
    padding: 2px 7px 2px 5px; 
 
    margin-bottom: 20px; 
 
    line-height: inherit; 
 
    color: #333; 
 
    background: #fff; 
 
    border: 1px solid #e3e3e3; 
 
    border-radius: 4px; 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); 
 
}

<form> 
 
    <fieldset class="well"> 
 
    <legend class="well-legend">Group Box Legend</legend> 
 
    ... your inputs ... 
 
    </fieldset> 
 
</form>