label und Eingabe in derselben Zeile auf dem Formular-Gruppe

Ich habe ein Formular-Gruppe mit einem label und 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>

Aber das label zeigt über dem Eingabefeld, muss ich es an seiner Seite. Ich habe bootstrap 4.0 installiert.

Ich habe versucht mit class="col-sm-2 col-form-label" und funktioniert auch nicht.

Irgendwelche Vorschläge?

InformationsquelleAutor Rohr Facu | 2018-02-21

  1. 6

    Den col-sm-2 sollte nicht verschachtelt werden direkt in col-md-12. Verwenden Sie das raster, wie dieses...

    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>

    Beachten Sie, dass form-row muss verwendet und enthält die col-. Die col-sm-10 steuert die Breite des Eingangs, so dass Sie ändern können, wie gebraucht. Lesen Sie mehr in der Dokumentation: https://getbootstrap.com/docs/4.0/components/forms/#form-grid

    Beachten Sie auch, die korrekte Verwendung der grid-row - > Spalten aus der Bootstrap docs...

    In einem grid-layout, Inhalt gesetzt werden müssen, innerhalb von Spalten und nur
    Spalten können unmittelbar untergeordneten Zeilen... Sie können auch swap .Zeile für .Formular-Zeile, eine Variante unserer standard-grid-Zeile, überschreibt die Standard-Spalte Rinnen für straffere und kompaktere layouts.

    InformationsquelleAutor Zim

  2. 4

    Können Sie erreichen es, indem Sie mit Klasse 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

    Sehen bootsrap 4 Dokumentation über Formen https://getbootstrap.com/docs/4.0/components/forms/#inline-forms und verwenden 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

Schreibe einen Kommentar