web-dev-qa-db-fra.com

étiquette et entrée sur la même ligne sur le groupe de formulaires

J'ai un groupe de formulaires avec une étiquette et une entrée

<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 s'affiche au-dessus du champ de saisie, j'en ai besoin à ses côtés. J'ai bootstrap 4.0 installé.

J'ai essayé avec class = "col-sm-2 col-form-label" et ne fonctionne pas non plus.

Aucune suggestion?

cssangulartwitter-bootstrapbootstrap-4
7
Rohr Facu

Le col-sm-2 ne doit pas être imbriqué directement dans col-md-12. Utilisez la grille comme ceci ...

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>

Remarquerez que form-row doit être utilisé pour contenir le col-. Le col-sm-10 contrôle la largeur de l'entrée, vous pouvez donc la modifier si nécessaire. En savoir plus dans les documents: https://getbootstrap.com/docs/4.0/components/forms/#form-grid

Notez également l'utilisation correcte de la ligne de grille> colonnes à partir des documents Bootstrap ...

Dans une disposition en grille, le contenu doit être placé dans des colonnes et seules les colonnes peuvent être des enfants immédiats des lignes ... Vous pouvez également échanger .row contre .form-row, une variation de notre ligne de grille standard qui remplace les gouttières de colonne par défaut pour plus serré et des dispositions plus compactes.

9
Zim

Vous pouvez y parvenir en utilisant 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>
5
Mittal Patel

Voir la documentation de bootstrap 4 sur les formulaires https://getbootstrap.com/docs/4.0/components/forms/#inline-forms et utilisez 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>
1
Safiyya