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

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

我遵循本网站的教程创建水平表单布局

我做错了什么？