web-dev-qa-db-fra.com

Disposition de formulaire en ligne Bootstrap avec des étiquettes au-dessus des entrées

J'aimerais créer un formulaire avec la disposition suivante à l'aide de Bootstrap 3:

enter image description here

J'ai un jsfiddle avec une tentative ici: http://jsfiddle.net/quyB6/

Et le balisage que j'ai essayé:

<form>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="number" value='' class="form-control" id="lineHeight">
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="number" value='' class="form-control" id="paddingTop" />
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="number" value='' class="form-control" id="paddingBottom">
    </div>
</div>
htmlcsstwitter-bootstrap-3
27
Chad Johnson

Je pense que la solution la plus simple serait d’ajouter col-xs-4 à la classe de chaque div. Cela fera en sorte que les divs seront en ligne pour l'exemple jsfiddle. De plus, vous devez fermer la balise de formulaire avec </form>.

<form>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
</form>
34
nicholaschris

Remplacez la balise <label> par <div> et elle s’alignera parfaitement.

9
Jack

Pour bootstrap v4, vous pouvez utiliser d-flex flex-column:

<div class="form-group col-md-4">
    <div class="d-flex flex-column">
        <label for="name" class="control-label">Line Height</label>
        <input type="number" value='' class="form-control" id="lineHeight">
    </div>
</div>
5
F.D.Castel

Mettre <div style="clear: both;"></div> entre <label> et <input> a fonctionné pour moi. J'ai essayé plusieurs des idées ci-dessus sans succès. Ceci est avec Bootstrap 3.3.7.

Alors 

<label for="name" class="control-label">Line Height</label> 
<div style="clear: both;"></div>
<input type="number" value='' class="form-control" id="lineHeight">

J'ai également inclus "pull-right" en tant que classe (c'est-à-dire class="control-label pull-right" et class="form-control pull-right" pour obtenir l'étiquette et l'entrée dans la partie droite de la page.

1
jenniwren