Actualmente estoy usando twitter bootstrap, que está funcionando muy bien, pero me gustaría agregar una leyenda a los elementos "bien" que se usan en un formulario (para que pueda tener múltiples pozos, que denota subsecciones en un formulario).Bootstrap - Añadiendo leyenda al pozo
Un ejemplo de lo que mi forma se parece ahora es:
Me gustaría añadir una leyenda de modo que pueda tener dos secciones separadas por debajo de la "Detalles" la partida, por ejemplo, pero ser capaz de denotar para qué son. Una leyenda parece la mejor manera de hacer esto.
La sección correspondiente del HTML se parece a:
<form>
<div class="row">
<div class="span6">
<div class="nonboxy-widget">
<div class="widget-head">
<h5>Details</h5>
</div>
<div class="widget-content">
<div class="widget-box">
<div class = 'form-horizontal well'>
<fieldset>
<div class="control-group">
<label class="control-label">Sale Type</label>
<div class="controls">
Cuando intento agregar una etiqueta de leyenda ya sea al conjunto de campos o la div con la clase form-horizontal well se hace como una partida en el interior de la caja, no como una leyenda html normal. Se hace así:
con el código
<div class = 'form-horizontal well'>
<fieldset>
<legend>Details</legend>
<div class="control-group">
¿Alguien puede recomendar una manera de conseguir que esto rinde como una leyenda normal, en la frontera de la caja?
EDIT: Gracias al código de Simbirsk, ahora tengo:
Esto es bastante estrecha, pero lo que quería era tener la leyenda vea como una leyenda html normal, en un conjunto de campos (es decir, para que se asiente en la frontera), así que cambié el CSS a:
legend {
padding: 0;
margin-left: 10px;
margin-bottom: -9px;
border: 0;
color: #999999;
background-color: #333333;
}
pero que resultó en esto:
¿Cómo puedo asegurarme de que el borde del pozo "se rompe" (no se muestra detrás del texto) como una leyenda de campo de campo normal?
EDIT 2: Después de la edición de la primera respuesta, que aplica el código a mi css y terminó con:
se dará cuenta de esto no es exactamente lo que estaba buscando - I Estoy tratando de obtener la leyenda en el borde del pozo div, no en el fieldset en sí (porque esta es una forma anidada, podría haber múltiples conjuntos de campo dentro de un pozo, por lo que no puedo poner el borde en el fieldset mismo).
Parece que lo logré con el código anterior, el único problema fue poner un corte en el borde donde está la leyenda: ¿puede hacerse esto con algún tipo de opacidad en el fondo del texto de la leyenda, y un poco de relleno?
¿Alguna otra sugerencia?
Gracias!
leyenda se utilizará junto con Fieldset, si desea crear sub-ssections de su contra, se podrá utilizar conjuntos de campos con su correspondiente leyenda. Su formulario también se incluirá dentro de
etiquetas y no divs. Si desea modificar el estilo de la leyenda de acuerdo con sus deseos, cree una ID para ella y declare un estilo para ella. –Gracias por su comentario: mi formulario tiene