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

Posted 2023-03-06

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

【英文标题】：label and input in same line on form-group

【发布时间】：2018-08-01 03:26:24

【问题描述】：

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

<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" 也不起作用。

有什么建议吗？

【参考方案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，这是我们标准网格行的一种变体，它覆盖了默认的列间距，以实现更紧凑和更紧凑的布局。

【参考方案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>

【参考方案3】：

查看Bootstrap 4 documentation about 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>

【参考方案4】：

其他帖子中的建议在 Bootstrap 5 中不起作用。因此，我通过更新 Bootstrap 5 文档中的 demos 之一对其进行了测试，它确实有效。使用这个演示应用程序，<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 Input Group页面。