如何定制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>

如何在输入元素的封闭<div>中定制col-sm-10？

Answer 1

1. 请注意，Ember Bootstrap窗体有三种布局：

- horizontal
- vertical
- inline

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

请参见：

- [https://www.ember-bootstrap.com/api/classes/Components.Form.html#property\_formLayout](https://www.ember-bootstrap.com/api/classes/Components.Form.html#property_formLayout)
- [https://getbootstrap.com/docs/4.6/components/forms/#horizontal-form](https://getbootstrap.com/docs/4.6/components/forms/#horizontal-form)
- [https://getbootstrap.com/docs/4.6/components/forms/#inline-forms](https://getbootstrap.com/docs/4.6/components/forms/#inline-forms)

1. 如果您对水平布局很满意，只是想调整列的大小，那么可以使用@horizontalLabelGridClass参数on the form或on individual element。这将调整accordingly.

上<label>上的类和同级<div>上的类