web-dev-qa-db-de.com

Verwenden Sie Fieldset Legend mit Bootstrap

Ich verwende Bootstrap für meine JSP-Seite.

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 so eine Ausgabe enter image description here

Ich möchte auf folgende Weise ausgeben

enter image description here

Ich habe versucht, etwas hinzuzufügen

border:none;
width:100px;

legend.scheduler-border in CSS. Und ich bekomme die erwartete Leistung. Aber das Problem ist, ich möchte ein weiteres<fieldset>für andere Felder hinzufügen. Zu diesem Zeitpunkt ist die Breite des Textes in der Legende ein Problem, da er länger als 100px ist.

Also, was soll ich tun, um die Ausgabe zu erhalten, wie ich sie erwähnt habe? (Ohne den Legendentext zu schlagen)

htmlcssformstwitter-bootstrap
142
Shiju K Babu

Das liegt daran, dass Bootstrap standardmäßig die Breite des legend-Elements auf 100% setzt. Sie können dies beheben, indem Sie Ihren legend.scheduler-border so ändern, dass er auch Folgendes verwendet:

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 außerdem sicherstellen, dass Ihr benutzerdefiniertes Stylesheet after Bootstrap hinzugefügt wird, um zu verhindern, dass Bootstrap Ihr ​​Styling überschreibt - obwohl Ihre Styles hier eine höhere Spezifität aufweisen sollten.

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

194
James Donnelly

In Bootstrap 4 ist es viel einfacher, einen Rand des Feldsatzes zu haben, der mit der Legende verschmilzt. Sie benötigen keine benutzerdefinierten CSS, um dies zu erreichen, es kann wie folgt durchgeführt werden:

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

was so aussieht:  bootstrap 4 fieldset and legend

24
Joe Audette

Ich hatte dieses Problem und habe es so gelöst:

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;
}
17
Mohammad Aghayari

Ich hatte einen anderen Ansatz, benutzte Bootstrap-Panel, um es etwas reichhaltiger 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 aussehen .  enter image description here

Hinweis: Wir müssen die Stile ändern, um eine andere Kopfgröße verwenden zu können. 

14
Jajikanth pydimarla

Ich wollte nur alle richtigen Antworten zusammenfassen. Denn ich musste viel Zeit investieren, um herauszufinden, welche Antwort das Problem löst und was hinter den Kulissen passiert.

Es scheint zwei Probleme von fieldset mit bootstrap zu geben:

  1. bootstrap setzt die Breite auf legend als 100%. Deshalb wird der obere Rand der fieldset überlagert. 
  2. Es gibt einen bottom border fü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
}
4
Manoj Shrestha

.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>

0
mystackoverflowhut