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

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

<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”，但也不起作用

---

有什么建议吗？

请参阅bootsrap 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>

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

名称

您可以通过使用类

表单内联来实现它

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

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

名称
不应将
col-sm-2
直接嵌套在
col-md-12
中。像这样使用网格



名称

请注意，
表单行
必须用于包含
列-
。
col-sm-10
控制输入的宽度，因此您可以根据需要进行更改。请阅读文档中的更多内容：

另外，请注意引导文档中网格行>列的正确使用

在网格布局中，内容必须放置在列中，并且仅限于
列可以是行的直接子项。。。您还可以将.row替换为.form row，这是我们标准网格行的一种变体，它覆盖了默认的列檐槽，以实现更紧凑的布局

这对我来说适用于Bootstrap4。只需更改标签和输入的列大小，以反映您希望标签的大小，记住这两个值必须加上12。作为奖励，向每个标签添加“text right”类，使它们在表单中右对齐，而不是左对齐。在我看来，这是一种进步



SKU（ID）
品名