在 Angular 中的文本字段旁边显示按钮答案

【问题标题】：Displaying the button beside the textfield in Angular在 Angular 中的文本字段旁边显示按钮
【发布时间】：2020-02-21 05:17:43
【问题描述】：

我在页面中创建了一个按钮“X”。但是，它显示在文本字段下方。

如何使用引导程序将其显示在文本字段旁边？

<div class="form-group row">
      <div class="field">
        <input
          type="text"
          id="{{ i }}"
          [(ngModel)]="fields[i]"
          name="name{{ i }}"
          (ngModelChange)="onChange()"
          class="form-control"
          #field="ngModel"
          required
        />
        <button
          class="remove"
          mat-mini-fab
          color="warn"
          (click)="removeField(i)"
          type="button"
        >
          X
        </button>
      </div>
</div>

【问题讨论】：

也许检查引导文档？这与 Angular 无关..
正如您在代码片段中看到的那样，它出现在文本字段检查您的样式之后，因为@MikeOne 说这与 Angular 无关。

标签： angular twitter-bootstrap bootstrap-4

【解决方案1】：

引导类 .form-control 将输入字段设置为 100% 宽度。要么把它放在你的 CSS 中：

.form-control {
    width: 30%;  // or whatever width you want
    float: left;
}

如果您不关心输入字段的样式（或自己自定义样式），或者从输入中删除 .form-control 类并添加 form-horizontal：

      <div class="form-group">
        <div class="field form-horizontal">
          <input
            type="text"
            id="{{ i }}"
            [(ngModel)]="fields[i]"
            name="name{{ i }}"
            (ngModelChange)="onChange()"
            #field="ngModel"
            required
          />
          <button
            class="remove"
            mat-mini-fab
            color="warn"
            (click)="removeField(i)"
            type="button"
          >
            X
          </button>
        </div>
      </div>

【讨论】：