Inline Bootstrap formulaire de mise en page avec des étiquettes au-dessus des entrées

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

Inline Bootstrap formulaire de mise en page avec des étiquettes au-dessus des entrées

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

Et le balisage 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>
InformationsquelleAutor Chad Johnson | 2014-06-28
  1. 38

    Je pense que la solution la plus simple serait d'ajouter col-xs-4 à la classe de chaque div. Qui fera en sorte que les divs sera en ligne pour le jsfiddle exemple. En outre, vous devez fermer la balise form 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>
    • Comment cela fonctionne, par le chemin? La documentation dit que l'ajout de la classe col-xs - touche supplémentaire de petits appareils (< 768px). Voir getbootstrap.com/css/#grid-media-queries.
    • Ma meilleure supposition serait que la fenêtre d'affichage (la section HTML) dans le JSFiddle exemple tombe dans le <768px de la catégorie. Si vous redimensionnez la fenêtre pour la sortie HTML, il serait probablement aller en ligne.
    • Il fait des séjours inline à la largeur totale: jsfiddle.net/quyB6/8/show
    InformationsquelleAutor nicholaschris
  2. 10

    Remplacer <label> tag avec <div> et il sera en ligne sur le dessus parfaitement.

    • Malheureusement, cela ne fonctionne plus depuis la v4-alpha.6. 🙁
    InformationsquelleAutor Jack
  3. 5

    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>
    • Merci! Ne pas que votre formulaire doit pas pour la classe form-inline si vous voulez l'utiliser avec les étiquettes sur le dessus de champs de saisie
    • Sans form-inline de classe, mes entrées sauter partout quand je l'activer
    InformationsquelleAutor F.D.Castel
  4. 1

    Mettre <div style="clear: both;"></div> entre les <label> et la <input> a fonctionné pour moi. J'ai essayé un tas d'idées ci-dessus à pas de chance. C'est avec Bootstrap 3.3.7.

    Donc 

    <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 aussi inclus "pull-right" comme une classe (c'est à dire class="control-label pull-right" et class="form-control pull-right" pour obtenir le label et l'entrée sur le côté droit de la page.

    InformationsquelleAutor jenniwren