html - examples - container-fluid bootstrap 4

Twitter Bootstrap 3 en línea y forma horizontal.

Question

Estoy tratando de migrar mi formulario Bootstrap 2 a Bootstrap 3.
Mi código actual y mi violín: http://jsfiddle.net/mavent/Z4TRx/

<div class="" id="myDialog1">
<div class="" id="myDialog2">
<form role="form" class="" id="contactForm" onsubmit="send(); return false;">
<label>Please fill the form</label>
<br/><br/>
<div class="form-group">
<label for="name">My Label 2</label>
<input type="text" class="form-control" name="name" id="name" required="required" value="myName">
</div>
<div class="form-group">
<label for="email">My Label 3</label>
<input type="email" class="form-control" name="email" id="email" required="required">
</div>
<div class="form-group">
<label for="message">My Label 4</label>
<textarea class="form-control" name="message" id="message" required="required"></textarea>
</div>
<button type="submit" class="btn btn-primary" id="submit" style="margin-left: 40px">Send</button>
</form>
</div>
</div>

Quiero comportamiento en línea, mi etiqueta 2 estará al lado del ingreso de texto, mi etiqueta 3 estará al lado del ingreso de texto. También necesito un comportamiento horizontal, mi etiqueta 4 estará en la parte superior del área de texto. El cuadro de texto de mi etiqueta 2 y el de mi etiqueta 3 tendrán un ancho de 4 columnas, el ancho de mi etiqueta 4 será el ancho completo del formulario.

¿Cómo puedo hacer esto en Bootstrap 3?

Answer 1

Agregar la control-label clase a tus etiquetas debería hacer el truco por ti.

Answer 2

El hecho de que los documentos sugieran que debe usar los controles de formulario no significa que tenga que hacerlo. Solo puede utilizar el sistema de cuadrícula incorporado para lograr el diseño. Consulte http://bootply.com/82900 para ver un ejemplo de trabajo. Código abajo:

<div class="container">
<form role="form">
<div class="row">
<label class="col-xs-4" for="inputEmail1">Email</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="row">
<label class="col-xs-4" for="inputPassword1">Password</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="row">
<label class="col-xs-12" for="TextArea">Text Area</label>
</div>
<div class="row">
<div class="col-xs-12">
<textarea class="form-control" id="TextArea"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>

ACTUALIZACIÓN: Me acabo de dar cuenta que dejé caer las etiquetas. Actualizada la respuesta, cambiando <label> por <div> .

ACTUALIZACIÓN: la actualización del código para reflejar la necesidad de permanecer en este diseño en pequeños anchos, como se solicita en los comentarios a continuación. Vea http://jsfiddle.net/8xxUV/3 para un ejemplo de trabajo.

Answer 3

Lo que estás buscando no es realmente un comportamiento en línea, solo horizontal.

Este código debería ayudar:

<div class="" id="myDialog1">
<div class="" id="myDialog2">
<form role="form" class="form-horizontal" id="contactForm" onsubmit="send(); return false;">
<label>Please fill the form</label>
<br><br>
<div class="form-group">
<label for="name" class="col-lg-3 col-sm-3">My Label 2</label>
<div class="col-lg-7 col-sm-7">
<input type="text" class="form-control" name="name" id="name" required="required" value="myName">
</div>
</div>
<div class="form-group">
<label for="email" class="col-lg-3 col-sm-3">My Label 3</label>
<div class="col-lg-7 col-sm-7">
<input type="email" class="form-control" name="email" id="email" required="required">
</div>
</div>
<div class="form-group">
<label for="message" class="col-lg-3">My Label 4</label>
<div class="col-lg-10 col-sm-10">
<textarea class="form-control" name="message" id="message" required="required"></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary" id="submit" style="margin-left: 20px">Send</button>
</form>
</div>
</div>

Y se ve así:

Las etiquetas col-sm-* son opcionales: simplemente evitan que los elementos se apilen a medida que se reduce el tamaño de la ventana.

Puedes probarlo aquí: http://bootply.com/82889

Answer 4

Puedes probar el siguiente código

<div class="" id="myDialog1">
<form role="form" class="" id="contactForm" onsubmit="send(); return false;">
<div class="clearfix igr col-md-12">
<label>Please fill the form</label>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-2">
<label for="name">My Label 2</label>
</div>
<div class="col-md-3">
<input type="text" class="form-control" name="name" id="name" required="required" value="myName">
</div>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-2">
<label for="email">My Label 3</label>
</div>
<div class="col-md-3">
<input type="email" class="form-control" name="email" id="email" required="required">
</div>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-12">
<label for="message">My Label 4</label>
</div>
<div class="col-md-3">
<textarea class="form-control" name="message" id="message" required="required"></textarea>
</div>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-2">
<button type="submit" class="btn btn-default btn-primary" id="submit" >Send</button>
</div>
</div>
</form>
</div>

y usa los estilos como:

label,textarea{
margin:5px 0;
}
.igr{
margin:15px 0;
}

Answer 5

Tuve el mismo problema, aquí está mi solución:

<form method="post" class="col-md-12 form-inline form-horizontal" role="form">
<label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
<div class="input-group col-sm-7">
<input class="form-control" type="email" name="email" placeholder="[email protected]"/>
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Submit</button>
</span>
</div>
</form>

aqui esta la Demo