标签并在表单组的同一行输入

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>

但是标签显示在输入字段上方，我需要它在它的侧面。我安装了bootstrap 4.0。

我尝试过class =“col-sm-2 col-form-label”并且也不起作用。

有什么建议？

Answer 1

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文档中的网格行>列...

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

Answer 2

你可以使用类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>

Answer 3

请参阅有关Forms qazxsw poi的bootstrap 4文档并使用qazxsw poi

https://getbootstrap.com/docs/4.0/components/forms/#inline-forms