Twitter Bootstrap 3 en ligne et horizontale de la forme

Je suis en train de migrer mon Bootstrap 2 formulaire de Bootstrap 3.

Mon code actuel et violon: 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>

Je veux inline comportement, mon label 2 sera à côté de l'entrée de texte, mon label 3 sera à côté de l'entrée de texte. J'ai aussi besoin horizontale comportement, mon label 4 sera sur le dessus de la textarea. Mon label 2 et mon étiquette 3 de la zone de texte sera de 4 largeur de colonne, mon label 4 de largeur largeur de la forme.

Comment puis-je faire cela dans le Bootstrap 3 ?

Parfaitement décrite ici - getbootstrap.com/css/#forms-horizontal Ajouter un col-- classes à vos étiquettes et emballage d'entrée divs.
mon seul souci est de ne pas ajouter le col--. inline + horizontale en même temps n'est pas écrit dans les docs.

InformationsquelleAutor trante | 2013-09-18

42

Simplement parce que les docs vous suggérons d'utiliser le formulaire de contrôle ne signifie pas que vous devez. Vous pouvez simplement utiliser l'intégré dans le système de grille pour réaliser la mise en page. Voir http://bootply.com/82900 pour un exemple. Le Code ci-dessous:
```
<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>
```
Mise à JOUR: Viens de réaliser que j'ai laissé tomber les étiquettes. Mise à jour de la réponse, la permutation de <label> pour <div>.

Mise à JOUR: la mise à Jour de code pour prendre en compte le besoin de rester dans cette mise en page en petites largeurs, comme demandé dans les commentaires ci-dessous. Voir http://jsfiddle.net/8xxUV/3 pour un exemple.
- Dans de grands écrans, et cela fonctionne. Mais si l'écran n'est pas à l'échelle de nouveau champs d'entrée va de la ligne suivante. Veuillez vérifier ce violon: jsfiddle.net/8xxUV/1
- Je afficher cette boîte de dialogue page dans une boîte de dialogue, donc ma lightbox largeur est de près de 600px.
- Alors il suffit de changer tous les col-md-* à col-sm-* ou col-xs-*. jsfiddle.net/8xxUV/2 la montre avec col-xs-*. J'ai aussi dû changer de colonne compter un peu assurez-vous que les étiquettes sont pas recouvertes par les entrées.
- Aussi, puisque vous êtes en montrant ce, dans une sorte de modal, je changerais les largeurs de colonne de prendre toute la largeur de la boîte de dialogue. Voir jsfiddle.net/8xxUV/3 comme une autre alternative.
- Je vous remercie. C'est ce que j'ai besoin. Au passage, textarea hauteur était très petite pour moi. J'ai donc ajouté ceci pour l'avenir: < textarea class="form-control" name="message" id="message" required="required" style="height: 150px;" > < /textarea >
- Juste pour référence future, des styles en ligne ne sont généralement pas une bonne idée. Si j'étais ce codage, je cible <textarea>'s dans la feuille de style. Quelque chose comme .modal textarea { height:150px; } (ajuster en fonction de votre modal classes que nécessaire). Cela permettrait de cibler le textarea dans une modal, en les gardant cohérente dans l'ensemble.
- Merci pour la suggestion 🙂
InformationsquelleAutor Sean Ryan

Ce que vous cherchez n'est pas vraiment en ligne de comportement à tous, juste à l'horizontale.

Ce code doit permettre:

<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>

Et ressemble à ceci:

Twitter Bootstrap 3 en ligne et horizontale de la forme

La col-sm-* balises sont facultatives - ils juste arrêter les éléments de l'empilement comme vous de la taille de la fenêtre vers le bas.

Vous pouvez l'essayer ici: http://bootply.com/82889

InformationsquelleAutor mccannf

J'ai eu le même problème, voici ma solution:

<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>

ici est la Démo

InformationsquelleAutor Amir

vous pouvez essayer le code ci-dessous

<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>

et utiliser les styles comme:

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

Aussi cette solution ne fonctionne pas pour les petits écrans. Veuillez vérifier ceci: jsfiddle.net/jLgTe/1 Formulaire crée de nouvelles lignes.
Afin que la solution soit de travail dans les petits écrans utiliser col-sm* au lieu de col-md*

InformationsquelleAutor user2594152

-1

Ajout de la classe control-label à vos étiquettes devraient faire l'affaire pour vous.

InformationsquelleAutor lobati

Vous devez vous connecter pour publier un commentaire.