web-dev-qa-db-fra.com

Bootstrap 3: Comment obtenir deux entrées de formulaire sur une ligne et d'autres entrées sur des lignes individuelles?

J'essaie de formater ma page d'enregistrement avec Bootstrap 3.1.1. Je voudrais que les deux premières entrées soient sur la même ligne, tandis que les autres entrées sont une propre ligne. J'ai joué avec les classes bootstrap "row", "form-inline" et "form-horizontal") en vain.

Est-ce que quelqu'un sait comment le faire?

Voici le violon

<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>
htmlcsstwitter-bootstraptwitter-bootstrap-3
35
fat fantasma

Utilisation <div class="row"> et <div class="form-group col-xs-6">

Voici un violon: https://jsfiddle.net/core972/SMkZV/2/

68
Core972

Vous pouvez envelopper les entrées dans col-* Des classes

<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

17
Zim

Vous pouvez coder comme deux champs de saisie dans 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>
9
Suwarnakumar Kanapathipillai

J'ai eu recours à la création de 2 cascades de styles utilisant inline-block pour les entrées qui remplacent quasiment le champ:

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

et une série de tailles fixes par opposition à%

.input-10 {
    width: 10em;
}

.input-32 {
    width: 32em;
}
1
Jacques Amar