Comment aligner les entrées sous forme de bootstrap avec input-group-addons?
J'ai une forme très simple avec Bootstrap 3 que je peux facilement (automatiquement) aligner quand je n'utilise pas input-group-addon s.
Après les avoir utilisés dans ma forme, il est impossible de l'aligner (la ligne avec les addons est plus large à cause des addons ajoutés)
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="product_name" class="col-sm-2 control-label">Product name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="product_name" placeholder="Product name">
</div>
</div>
<div class="form-group">
<label for="product_price" class="col-sm-2 control-label">Price</label>
<div class="col-sm-4 input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="form-group">
<label for="product_description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-6">
<textarea class="form-control" id="product_description" placeholder="Description" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
JsFiddle: http://jsfiddle.net/Yzxy3/
4 réponses
La documentation Bootstrap pour les groupes d'entrée indique:
Ne mélangez pas input-group avec d'autres composants. (voir:http://getbootstrap.com/components/#input-groups)
Ne mélangez pas directement les groupes de formulaires ou les classes de colonnes de grille avec les groupes d'entrée. Au lieu de cela, imbriquez le groupe d'entrée à l'intérieur du groupe de formulaire ou de l'élément lié à la grille."
Vous ne pouvez donc pas mélanger "col-sm-4 "avec" input-group " dans la même classe. Vous devez créer 2 classe div, le premier avec "col-sm-4" et l'autre avec "entrée-groupe"
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999">
<span class="input-group-addon">.00</span>
</div>
</div>
C'est parce que .input-group a par défaut
padding-right: 0;
padding-left: 0;
Ainsi, votre {[4] } s'étendra sur toute la largeur, Où as .col-sm-4 a des styles par défaut comme:
padding-right: 15px;
padding-left: 15px;
, Donc pour le faire fonctionner comme prévu, vous pouvez ajouter ce style:
.input-group[class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}
Je trouve que j'avais aussi besoin d'inclure: float: left. Donc, le css est:
.input-group[class*="col-"] {
float: left;
padding-right: 15px;
padding-left: 15px;
}
Sinon, mes lignes multi-colonnes se sont cassées lorsque j'ai mis à niveau de v3.0.2 à v3.0.3.
--cp
.entrée-groupe[class*="col-"] n'est pas utile si vous utilisez
<fieldset>
Voici la solution!
.makeHorizontal{
float:left;
padding-left:20px;
}