Étiquette sur le côté gauche au lieu d'un champ de saisie
J'aimerais que les étiquettes ne se trouvent pas au-dessus du champ de saisie, mais à gauche.
<form method="post" action="" role="form" class="form-inline">
<div class="form-group">
<label for="rg-from">Ab: </label>
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
</div>
<div class="form-group">
<label for="rg-to">Bis: </label>
<input type="text" id="rg-to" name="rg-to" value="" class="form-control">
</div>
<div class="form-group">
<input type="button" value="Clear" class="btn btn-default btn-clear">
<input type="submit" value="Los!" class="btn btn-primary">
</div>
</form>
Ce code me donne:
Je voudrais avoir:
Vous pouvez utiliser une classe de formulaire en ligne pour chaque groupe de formulaires :)
<form>
<div class="form-group form-inline">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</form>
Placez le <label> en dehors du form-group:
<form class="form-inline">
<label for="rg-from">Ab: </label>
<div class="form-group">
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
</div>
<!-- rest of form -->
</form>
La documentation de Bootstrap 3 en parle dans l'onglet Documentation CSS de la section "Requiert des largeurs personnalisées", qui indique:
Les entrées, sélections et zones de texte ont une largeur de 100% par défaut dans Bootstrap . Pour utiliser le formulaire en ligne, vous devez définir une largeur sur le formulaire contrôles utilisés dans.
Si vous utilisez votre navigateur et les outils Firebug ou Chrome pour supprimer ou réduire le style "largeur", vous devez voir les éléments s'aligner comme vous le souhaitez. Clairement, vous pouvez ensuite créer le CSS approprié pour résoudre le problème.
Cependant, je trouve étrange que je doive le faire du tout. Je ne pouvais pas m'empêcher de penser que cette manipulation était à la fois ennuyeuse et, à long terme, sujette aux erreurs. En fin de compte, j’ai utilisé une classe fictive et quelques JS pour ajuster globalement toutes mes entrées en ligne. Il s’agissait d’un petit nombre de cas, donc peu préoccupant.
Néanmoins, j'aimerais aussi avoir des nouvelles de quelqu'un qui a la "bonne" solution et qui pourrait éliminer mes problèmes.
J'espère que cela vous aidera et vous félicitera de ne pas avoir fait sauter un joint à toutes les personnes qui ont ignoré votre demande en tant que préoccupation de Bootstrap 3.
Vous pouvez créer un tel formulaire où libellé et contrôle de formulaire sont latéraux à l'aide de deux méthodes:
1. Disposition de formulaire en ligne
<form class="form-inline" role="form">
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-primary">Login</button>
</form>
2. Mise en forme horizontale
<form class="form-horizontal">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-3">Email</label>
<div class="col-xs-9">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="inputPassword" class="control-label col-xs-3">Password</label>
<div class="col-xs-9">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</div>
<div class="col-sm-3">
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
Vous pouvez consulter cette page pour plus d'informations et une démonstration en direct - http://www.tutorialrepublic.com/Twitter-bootstrap-tutorial/bootstrap-forms.php
Comme ça
HTML
<div class="row">
<form class="form-inline">
<fieldset>
<label class="control-label"><strong>AB :</strong></label>
<input type="text" class="input-mini" >
<label class="control-label"><strong>BIS:</strong></label>
<input type="text" class="input-mini" >
<input type="button" value="Clear" class="btn btn-default btn-clear">
<input type="submit" value="Los!" class="btn btn-primary">
</fieldset>
</form>
</div>
J'ai eu le même problème, voici ma solution:
<form method="post" class="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>
voici la Demo
Vous devez laisser à gauche tous les éléments comme ceci:
.form-group,
.form-group label,
.form-group input { float:left; display:inline; }
donnez une marge aux éléments désirés:
.form-group { margin-right:5px }
et définissez le libellé avec la même hauteur de ligne que la hauteur des champs:
.form-group label { line-height:--px; }
D'après les réponses existantes, vous pouvez constater que la terminologie de Bootstrap est source de confusion. Si vous examinez la documentation de bootstrap, vous verrez que la classe form-horizontal s’applique en réalité à un formulaire dont les champs se superposent, c’est-à-dire ce que la plupart des gens considèrent comme un formulaire vertical. La classe correcte pour un formulaire traversant la page est form-inline . Ils ont probablement introduit le terme inline car ils avaient déjà mal utilisé le terme horizontal .
Certaines des réponses fournies ici montrent que certaines personnes utilisent ces deux classes sous une forme! D'autres pensent qu'ils ont besoin de form-horizontal lorsqu'ils veulent réellement form-inline .
Je suggère de le faire exactement comme décrit dans la documentation Bootstrap:
<form class="form-inline">
<div class="form-group">
<label for="nameId">Name</label>
<input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
</div>
</form>
Qui produit:
Je suis sûr que vous auriez déjà trouvé votre réponse ... Voici la solution à laquelle j'ai dérivé.
C'est mon CSS.
.field, .actions {
margin-bottom: 15px;
}
.field label {
float: left;
width: 30%;
text-align: right;
padding-right: 10px;
margin: 5px 0px 5px 0px;
}
.field input {
width: 70%;
margin: 0px;
}
Et mon HTML ...
<h1>New customer</h1>
<div class="container form-center">
<form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
<div style="margin:0;padding:0;display:inline"></div>
<div class="field">
<label for="customer_first_name">First name</label>
<input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
</div>
<div class="field">
<label for="customer_last_name">Last name</label>
<input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
</div>
<div class="field">
<label for="customer_addr1">Addr1</label>
<input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
</div>
<div class="field">
<label for="customer_addr2">Addr2</label>
<input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
</div>
<div class="field">
<label for="customer_city">City</label>
<input class="form-control" id="customer_city" name="customer[city]" type="text" />
</div>
<div class="field">
<label for="customer_pincode">Pincode</label>
<input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
</div>
<div class="field">
<label for="customer_homephone">Homephone</label>
<input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
</div>
<div class="field">
<label for="customer_mobile">Mobile</label>
<input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
</div>
<div class="actions">
<input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
</div>
</form>
</div>
Vous pouvez voir l'exemple de travail ici ... http://jsfiddle.net/s6Ujm/
PS: Je suis aussi un débutant, designers professionnels ... n'hésitez pas à partager vos commentaires.
Je pense que c'est ce que vous voulez, dans la documentation d'amorçage "Forme horizontale Utilisez les classes de grille prédéfinies de Bootstrap pour aligner les étiquettes et les groupes de contrôles de formulaire dans une présentation horizontale en ajoutant .form-horizontal au formulaire. -groups se comporter comme des lignes de la grille, donc pas besoin de .row ". Alors:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
J'ai réussi à résoudre mon problème avec. Semble fonctionner correctement et signifie que je n'ai pas à ajouter manuellement des largeurs à toutes mes entrées.
.form-inline .form-group input {
width: auto;
}
Aucune CSS requise. Cela devrait bien paraître sur votre page. Vous pouvez définir col-md-* selon vos besoins
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<div class="col">
<div class="form-group">
<label for="inputEmail" class="col-sm-3">Email</label>
<input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="inputPassword" class="col-sm-3">Email</label>
<input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
</div>
</div>
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-primary">Button 2</button>
</form>
</div>
</div>Il semble que l’ajout de style="width:inherit;" aux entrées fonctionne bien . jsfiddle demo
<div class="control-group">
<label class="control-label" for="firstname">First Name</label>
<div class="controls">
<input type="text" id="firstname" name="firstname"/>
</div>
</div>
Nous pouvons aussi l'utiliser simplement comme
<label>First name:
<input type="text" id="firstname" name="firstname"/>
</label>
Vous pouvez utiliser une balise span à l'intérieur de l'étiquette
<div class="form-group">
<label for="rg-from">
<span>Ab:</span>
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
</label>
</div>