Usa Fieldset Legend con bootstrap

Sto usando Bootstrap per la mia JSPpagina.

Voglio usare <fieldset>e <legend>per il mio modulo. Questo è il mio codice

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

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;
}

Sto ottenendo un output in questo modo

Voglio l'output nel modo seguente

Ho provato ad aggiungere

border:none;
width:100px;

a legend.scheduler-borderin CSS. E sto ottenendo il risultato atteso. Ma il problema è che vorrei aggiungerne un altro <fieldset>per altri campi. Quella volta la larghezza del testo nella legenda è un problema in quanto è più lunga di 100px.

Quindi cosa devo fare per ottenere un output come ho già detto? (Senza colpire il testo della legenda)

Questo perché Bootstrap per impostazione predefinita imposta la larghezza legenddell'elemento al 100%. Puoi risolvere questo problema cambiando il tuo legend.scheduler-borderper usare anche:

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

JS Esempio di violino .

Dovrai anche assicurarti che il tuo foglio di stile personalizzato venga aggiunto dopo Bootstrap per evitare che Bootstrap prevalga sul tuo stile, anche se i tuoi stili qui dovrebbero avere una specificità più elevata.

Potresti anche voler aggiungere margin-bottom:0;ad esso per ridurre il divario tra la legenda e il divisore.

In bootstrap 4 è molto più facile avere un bordo sul fieldset che si fonde con la legenda. Non hai bisogno di CSS personalizzati per raggiungerlo, può essere fatto in questo modo:

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

che assomiglia a questo:

Ho avuto questo problema e ho risolto in questo modo:

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;
}

Avevo un approccio diverso, ho usato il pannello bootstrap per mostrarlo un po 'più ricco. Solo per aiutare qualcuno e migliorare la risposta.

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

Questo darà uno sguardo sotto.

Nota: è necessario modificare gli stili per poter utilizzare diverse dimensioni dell'intestazione.

Volevo solo riassumere tutte le risposte corrette sopra in breve. Perché ho dovuto dedicare molto tempo a capire quale risposta risolve il problema e cosa succede dietro le quinte.

Sembra che ci siano due problemi di fieldset con bootstrap:

1. L' bootstrapimposta la larghezza al legend100%. Questo è il motivo per cui si sovrappone al bordo superiore di fieldset.
2. C'è un bottom borderper il legend.

Quindi, tutto ciò di cui abbiamo bisogno per risolvere questo problema è impostare la larghezza della legenda su auto come segue:

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