bootstrap-4 - 如何自定义 ember-bootstrap form.element 以便输入使用特定的列大小？

Question

我正在使用 ember-bootstrap 和以下元素：

<form.element @controlType="text" @label="First Name:" @property="firstName" />

生成以下 HTML

<div class="form-group row">
  <label class="col-sm-4 col-form-label" for="ember198-field">First Name</label>

  <div class="col-sm-10">
    <input id="ember198-field" class="form-control" type="text">
  </div>
</div>

如何自定义输入元素col-sm-10的封装？<div>

Answer 1

1. 请注意，Ember Bootstrap 表单具有三种布局：

   • 水平的
   • 垂直的
   • 排队

   您似乎正在使用默认的水平布局。不同的布局可能更适合您。

   看：

   • https://www.ember-bootstrap.com/api/classes/Components.Form.html#property_formLayout
   • https://getbootstrap.com/docs/4.6/components/forms/#horizo​​ntal-form
   • https://getbootstrap.com/docs/4.6/components/forms/#inline-forms

2. 如果您对水平布局很满意并且只想调整列大小，请在表单或单个元素@horizontalLabelGridClass上使用参数。这将调整上的类，并且兄弟上的类将相应地调整。<label><div>