web-dev-qa-db-ja.com

ラベルとフォームグループの同じ行に入力

ラベルと入力の両方を持つフォームグループがあります

<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>

ただし、ラベルは入力フィールドの上に表示されます。横に必要です。 bootstrap 4.0がインストールされています。

私はclass = "col-sm-2 col-form-label"を試してみましたが、どちらも機能しません。

助言がありますか？

cssangulartwitter-bootstrapbootstrap-4
7
Rohr Facu

col-sm-2をcol-md-12に直接ネストすることはできません。このようなグリッドを使用して...

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>

form-rowを含めるには、col-を使用する必要があることに注意してください。 col-sm-10は入力の幅を制御するため、必要に応じて変更できます。ドキュメントで詳細を読む： https://getbootstrap.com/docs/4.0/components/forms/#form-grid

また、 Bootstrap docs ...からのグリッド行>列.

グリッドレイアウトでは、コンテンツは列内に配置する必要があり、列のみが行の直接の子になる可能性があります... .rowを.form-rowに交換することもできます。よりコンパクトなレイアウト。

9
Zim

あなたはそれをクラス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

フォームに関するbootsrap 4のドキュメント https://getbootstrap.com/docs/4.0/components/forms/#inline-forms を参照し、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