Use Fieldset Legend con bootstrap

Estoy usando Bootstrap para mi JSPpágina.

Quiero usar <fieldset>y <legend>para mi forma. Este es mi codigo.

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

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

Estoy obteniendo resultados como este

Quiero salida de la siguiente manera

Traté de agregar

border:none;
width:100px;

a legend.scheduler-borderen CSS. Y estoy obteniendo el resultado esperado. Pero el problema es que me gustaría agregar otro <fieldset>para otros campos. Esa vez, el ancho del texto en la leyenda es un problema, ya que es más largo que 100px.

Entonces, ¿qué debo hacer para obtener resultados como he mencionado? (Sin golpear el texto de la leyenda)

Esto se debe a que Bootstrap establece de manera predeterminada el ancho del legendelemento al 100%. Puede solucionar esto cambiando su legend.scheduler-borderpara usar también:

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

También deberá asegurarse de que su hoja de estilo personalizada se agregue después de Bootstrap para evitar que Bootstrap anule su estilo, aunque sus estilos aquí deberían tener una mayor especificidad.

También es posible que desee agregarle margin-bottom:0;también para reducir la brecha entre la leyenda y el divisor.

En Bootstrap 4 es mucho más fácil tener un borde en el conjunto de campos que se mezcle con la leyenda. No necesita CSS personalizado para lograrlo, se puede hacer así:

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

que se ve así:

Tuve este problema y lo resolví de esta manera:

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

Tenía un enfoque diferente, utilicé el panel de arranque para mostrarlo un poco más rico. Solo para ayudar a alguien y mejorar la respuesta.

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

Esto le dará un vistazo a continuación.

Nota: Necesitamos cambiar los estilos para usar diferentes tamaños de encabezado.

Solo quería resumir todas las respuestas correctas en breve. Porque tuve que pasar mucho tiempo para determinar qué respuesta resuelve el problema y qué está sucediendo detrás de escena.

Parece haber dos problemas de campo con bootstrap:

1. La bootstrapdefine la anchura a la legendcomo 100%. Es por eso que se superpone al borde superior de la fieldset.
2. Hay un bottom borderpara el legend.

Entonces, todo lo que necesitamos para solucionar esto es establecer el ancho de la leyenda en automático de la siguiente manera:

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