Question

我在使用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上的教程

我在做什么错了？

Answer 1

请在表单组上添加类行

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

Answer 2

使用输入组类。跟随This

Bootstrap标签和输入字段对齐问题

2 个答案: