在表单组的同一行中添加标签和输入

Question

我有一个包含标签和输入的表单组

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

然而，标签显示在输入字段上方，我需要它在其旁边。我已经安装了Bootstrap4.0。

我已尝试使用class=“col-sm-2 col form label”，但也不起作用。

有什么建议吗？

Answer 1

请参阅有关表单和使用表单内联的Bootstrap 4文档

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

Answer 2

您可以通过使用classforminline

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

Answer 3

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

另外，请注意网格行的正确使用

在网格布局中，内容必须放置在列中，并且只有列可以是行的直接子行...您也可以将. row替换为. form-row，这是我们标准网格行的一种变体，它覆盖了默认的列排水沟，以实现更紧凑的布局。