引导标签和输入字段对齐问题答案

【问题标题】：Issues with Bootstrap Label and Input Field Alignment引导标签和输入字段对齐问题
【发布时间】：2019-02-26 10:15:26
【问题描述】：

我在使用 Bootstrap 4 的 Angular 应用程序中有以下表单。我希望表单标签和输入文本框位于同一行，但它不起作用。标签和输入文本框出现在不同的行上。我已经搜索但找不到更好的答案::

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-12">
  <form class="form-horizontal" [formGroup]="parentCategoryForm" autoComplete="off">
    <div class="form-group">
      <label class="control-label col-md-2" for="parent">Category name</label>
      <div class="col-md-10">
        <input type="text" formControlName="parentName" name="parentName" class="form-control" id="parentName" />
      </div>
    </div>
    <div class="btn-toolbar pull-right">
      <button type="button" (click)="cancel()" class="btn btn-outline-danger btn-sm mr-4">Cancel</button>
      <button type="submit" class="btn btn-outline-primary btn-sm">Submit</button>
    </div>
  </form>
</div>
</div>

我正在关注这个网站上的教程Creating Horizontal Form Layout

我做错了什么？

【问题讨论】：

标签： html css angular twitter-bootstrap bootstrap-4

【解决方案1】：

请在表单组中添加类行

<div class="form-group row"> </div>

【讨论】：

【解决方案2】：

使用 input-group 类。关注This

【讨论】：

在新 div 中的 input-group 类中添加标签和输入。