时间戳

首页 > 解决方案 > 引导标签和输入字段对齐问题

html - 引导标签和输入字段对齐问题

问题描述

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

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

我正在关注本网站上的教程创建水平表单布局

我究竟做错了什么？

标签： htmlcssangulartwitter-bootstrapbootstrap-4

解决方案

请在表单组上添加班级行

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

推荐阅读