html - requerido - plantilla de registro bootstrap

Bootstrap 3: ¿Cómo obtener dos entradas de formulario en una línea y otras entradas en líneas individuales?

Question

Estoy tratando de formatear mi página de registro con Bootstrap 3.1.1. Me gustaría que las dos primeras entradas estuvieran en la misma línea mientras que las otras entradas son una misma línea. He jugado con las clases bootstrap "row", "form-inline" y "form-horizontal" en vano.

¿Alguien sabe cómo hacerlo?

Aquí está el Fiddle

<style>
.reg_name {
 max-width:200px;
}
</style>


<form name="registration_form" id=''registration_form'' class="form-inline">

        <div class="form-group">
            <label for="firstname" class="sr-only"></label>
            <input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
                   title="Enter first name"
                   placeholder="First name"/>
        </div>

        <div class="form-group">
            <label for="lastname" class="sr-only"></label>
            <input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
                   title="Enter last name"
                   placeholder="Last name"/>
        </div>

    <div class="form-group">
        <label for="username" class="sr-only"></label>
        <input id="username" class="form-control input-group-lg" type="text" autocapitalize=''off'' name="username"
               title="Enter username"
               placeholder="Username"/>
    </div>

    <div class="form-group">
        <label for="password" class="sr-only"></label>
        <input id="password" class="form-control input-group-lg" type="password" name="password"
               title="Enter password"
               placeholder="Password"/>
    </div>

 </form>

Answer 1

Puede envolver las entradas en clases col-*

<form name="registration_form" id="registration_form" class="form-horizontal">
     <div class="form-group">
           <div class="col-sm-6">
             <label for="firstname" class="sr-only"></label>
             <input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name">
           </div>       
           <div class="col-sm-6">
             <label for="lastname" class="sr-only"></label>
             <input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name">
           </div>
    </div><!--/form-group-->

    <div class="form-group">
        <div class="col-sm-12">
          <label for="username" class="sr-only"></label>
          <input id="username" class="form-control input-group-lg" type="text" autocapitalize="off" name="username" title="Enter username" placeholder="Username">
        </div>
    </div><!--/form-group-->

    <div class="form-group">
        <div class="col-sm-12">
        <label for="password" class="sr-only"></label>
        <input id="password" class="form-control input-group-lg" type="password" name="password" title="Enter password" placeholder="Password">
        </div>
    </div><!--/form-group-->
 </form>

http://bootply.com/127825

Answer 2

Recurrí a crear 2 cascadas de estilo usando un bloque en línea para la entrada que prácticamente anula el campo:

.input-sm {
    height: 2.1em;
    display: inline-block;
}

y una serie de tamaños fijos en comparación con%

.input-10 {
    width: 10em;
}

.input-32 {
    width: 32em;
}

Answer 3

Utilice <div class="row"> y <div class="form-group col-xs-6">

Aquí un violín: https://jsfiddle.net/core972/SMkZV/2/

Answer 4

Puedes codificar como dos cuadros de entrada dentro de un div

<div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input style="width:50% " class="form-control " placeholder="first name"  name="firstname" type="text" />
            <input style="width:50% " class="form-control " placeholder="lastname"  name="lastname" type="text" />
        </div>