Verwenden Sie Fieldset Legend mit Bootstrap

Ich verwende Bootstrap für meine JSPSeite.

Ich möchte <fieldset>und <legend>für mein Formular verwenden. Das ist mein Code.

<fieldset class="scheduler-border">
    <legend class="scheduler-border">Start Time</legend>
    <div class="control-group">
        <label class="control-label input-label" for="startTime">Start :</label>
        <div class="controls bootstrap-timepicker">
            <input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" />
            <i class="icon-time"></i>
        </div>
    </div>
</fieldset>

CSS ist

fieldset.scheduler-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

legend.scheduler-border {
    font-size: 1.2em !important;
    font-weight: bold !important;
    text-align: left !important;
}

Ich bekomme eine solche Ausgabe

Ich möchte die Ausgabe folgendermaßen

Ich habe versucht hinzuzufügen

border:none;
width:100px;

um legend.scheduler-borderin CSS. Und ich bekomme die erwartete Ausgabe. Das Problem ist jedoch, dass ich <fieldset>für andere Felder ein weiteres hinzufügen möchte . Diesmal ist die Breite des Textes in der Legende ein Problem, da er länger als ist 100px.

Was soll ich also tun, um eine Ausgabe zu erhalten, wie ich sie erwähnt habe? (Ohne den Legendentext zu streichen)

Dies liegt daran, dass Bootstrap standardmäßig die Breite des legendElements auf 100% festlegt . Sie können dies beheben, indem Sie Ihre ändern, legend.scheduler-borderum auch Folgendes zu verwenden:

legend.scheduler-border {
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
}

JSFiddle-Beispiel .

Sie müssen auch sicherstellen, dass Ihr benutzerdefiniertes Stylesheet nach dem Bootstrap hinzugefügt wird, um zu verhindern, dass Bootstrap Ihr ​​Styling überschreibt - obwohl Ihre Styles hier eine höhere Spezifität aufweisen sollten.

Möglicherweise möchten Sie auch hinzufügen margin-bottom:0;, um die Lücke zwischen der Legende und dem Teiler zu verringern.

In Bootstrap 4 ist es viel einfacher, einen Rand auf dem Feldsatz zu haben, der mit der Legende verschmilzt. Sie benötigen kein benutzerdefiniertes CSS, um dies zu erreichen. Dies kann folgendermaßen erfolgen:

<fieldset class="border p-2">
   <legend  class="w-auto">Your Legend</legend>
</fieldset>

das sieht so aus:

Ich hatte dieses Problem und löste es folgendermaßen:

fieldset.scheduler-border {
    border: solid 1px #DDD !important;
    padding: 0 10px 10px 10px;
    border-bottom: none;
}

legend.scheduler-border {
    width: auto !important;
    border: none;
    font-size: 14px;
}

Ich hatte einen anderen Ansatz und benutzte das Bootstrap-Panel, um es etwas reicher zu zeigen. Nur um jemandem zu helfen und die Antwort zu verbessern.

.text-on-pannel {
  background: #fff none repeat scroll 0 0;
  height: auto;
  margin-left: 20px;
  padding: 3px 5px;
  position: absolute;
  margin-top: -47px;
  border: 1px solid #337ab7;
  border-radius: 8px;
}

.panel {
  /* for text on pannel */
  margin-top: 27px !important;
}

.panel-body {
  padding-top: 30px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-body">
      <h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>
      <p> Your Code </p>
    </div>
  </div>
  <div>

Dies wird unten einen Blick geben.

Hinweis: Wir müssen die Stile ändern, um unterschiedliche Headergrößen zu verwenden.

Ich wollte nur alle richtigen Antworten oben kurz zusammenfassen. Weil ich viel Zeit aufwenden musste, um herauszufinden, welche Antwort das Problem löst und was sich hinter den Kulissen abspielt.

Es scheint zwei Probleme mit Fieldset mit Bootstrap zu geben:

1. Das bootstrapsetzt die Breite auf legend100%. Deshalb überlagert es den oberen Rand des fieldset.
2. Es gibt eine bottom borderfür die legend.

Um dies zu beheben, müssen Sie die Legendenbreite wie folgt auf auto setzen:

legend.scheduler-border {
   width: auto; // fixes the problem 1
   border-bottom: none; // fixes the problem 2
}