l'étiquette et l'entrée de la ligne sur le formulaire-groupe

J'ai un formulaire de groupe avec à la fois un label et input

<div class="col-md-12 form-group">
     <label class="col-sm-2 col-form-label"  for="name">Name</label>
     <input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>

Cependant l'étiquette affiche au-dessus du champ de saisie, j'ai besoin d'elle à ses côtés. J'ai bootstrap 4.0 est installé.

J'ai essayé avec class="col-sm-2 col-forme de l'étiquette" et ne fonctionne pas non plus.

Des suggestions?

InformationsquelleAutor Rohr Facu | 2018-02-21
  1. 8

    La col-sm-2 ne devrait pas être imbriquées directement dans col-md-12. Utiliser la grille comme ça...

    https://www.codeply.com/go/Gdt1BZs9Hg

    <form class="col-12">
  <div class="form-row">
     <label class="col-sm-2 col-form-label"  for="name">Name</label>
     <input type="text" class="form-control col-sm-10" name="name" id="name" [(ngModel)]="person.name" disabled/>
  </div>
</form>

    Avis que form-row doit servir à contenir les col-. Le col-sm-10 contrôle la largeur de l'entrée, de sorte que vous pouvez le changer au besoin. Lire la suite dans les docs: https://getbootstrap.com/docs/4.0/components/forms/#form-grid

    Aussi, note le utilisation correcte de la ligne de grille > colonnes de à partir du Bootstrap docs...

    Dans une grille de mise en page, le contenu doit être placé à l'intérieur des colonnes et seulement
    les colonnes peuvent être immédiats des enfants de lignes... Vous pouvez aussi échanger .ligne pour .de formulaire en ligne, une variante de notre standard de la grille de ligne qui remplace la valeur par défaut de la colonne des gouttières pour plus serrée et plus compact mises en page.

    InformationsquelleAutor Zim
  2. 5

    Vous pouvez la réaliser à l'aide de la classe form-inline

    <div class="form-inline">
    <div class="col-md-12 form-group">
         <label class="col-sm-2 col-form-label"  for="name">Name</label>
         <input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
    </div>
</div>
    InformationsquelleAutor Mittal Patel
  3. 1

    Voir bootsrap 4 de la documentation sur les Formes https://getbootstrap.com/docs/4.0/components/forms/#inline-forms et l'utilisation form-inline

    <div class="col-md-12 form-group form-inline">
     <label class="col-sm-2 col-form-label"  for="name">Name</label>
     <input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
    InformationsquelleAutor Safiyya