Usar Fieldset Legend con bootstrap

Estoy usando Bootstrap para mi página JSP.

Quiero usar <fieldset> y <legend> para mi estado de forma. Este es mi código.

<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 una salida como esta introduzca la descripción de la imagen aquí

Quiero la salida de la siguiente manera

introduzca la descripción de la imagen aquí

He intentado añadir

border:none;
width:100px;

A legend.scheduler-border en CSS. Y estoy obteniendo la salida esperada. Pero el problema es que me gustaría añadir otro <fieldset> para otros campos. Esa vez la anchura de texto en leyenda es un problema ya que es más largo que 100px.

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

Author: Rohit Suthar, 2013-05-31
Source

6 answers

Esto se debe a que Bootstrap establece por defecto el ancho del elemento legend al 100%. Puedes arreglar esto cambiando tu legend.scheduler-border para 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;
}

Ejemplo de JSFiddle.

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

Es posible que también desee agregar margin-bottom:0; para reducir la brecha entre la leyenda y divisor.

 183
Author: James Donnelly,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-31 08:02:28

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;
}
 16
Author: Mohammad Aghayari,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-22 15:44:48

Tenía un enfoque diferente , utilizado panel de arranque para mostrar poco más rico. Sólo 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á la siguiente mirada. introduzca la descripción de la imagen aquí

Nota: Necesitamos cambiar los estilos para usar un tamaño de encabezado diferente.

 13
Author: Jajikanth pydimarla,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-19 15:58:29

En bootstrap 4 es mucho más fácil tener un borde en el fieldset que se mezcla 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 parece a esto: bootstrap 4 fieldset y leyenda

 8
Author: Joe Audette,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-23 11:40:25

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

Parece que hay dos problemas de fieldset con bootstrap:

  1. El bootstrap establece el ancho en el legend como 100%. Es por eso que se superpone al borde superior del fieldset.
  2. Hay un bottom border para el legend.

Entonces, todo lo que necesitamos para arreglar esto es establecer el ancho de la leyenda en auto como sigue: 

legend.scheduler-border {
   width: auto; // fixes the problem 1
   border-bottom: none; // fixes the problem 2
}
 3
Author: Manoj Shrestha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-13 21:14:22 

.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
Author: mystackoverflowhut,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-19 07:51:52