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

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

其他帖子中的建议在Bootstrap 5中不起作用。因此，我通过更新Bootstrap 5 文档中的演示之一对其进行了测试，结果成功了。通过此演示应用程序，<label>、<input>和<button>元素可以在一行中定义：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<form role="form">
  <div class="input-group flex-nowrap">
    <span class="input-group-text" id="addon-wrapping">Article Title</span>
    <input type="text" class="form-control" placeholder="Please enter the new article name..." aria-label="Username" aria-describedby="addon-wrapping">
    <button class="btn btn-primary" type="submit" id="article-update-button">Update</button>
  </div>
</form>

表单屏幕截图如下： 有关更多信息，请访问Bootstrap 5 输入组页面。

Answer 2

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

您可以通过使用类来实现 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>