如何自定义ember引导表单.element,以便输入使用特定的列大小?

rqmkfv5c  于 2022-10-20  发布在  其他
关注(0)|答案(1)|浏览(105)

我正在使用ember引导和以下元素:

<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

ruoxqz4g

ruoxqz4g1#

  • 请注意,Ember Bootstrap表单有三种布局:
  • 水平的,水平的
  • 垂直的,垂直的
  • 内联的,内联的

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

  • https://www.ember-bootstrap.com/api/classes/Components.Form.html#property_formLayout
  • https://getbootstrap.com/docs/4.6/components/forms/#horizontal-形式
  • https://getbootstrap.com/docs/4.6/components/forms/#inline-表格
  • 如果您对水平布局很感兴趣,只想调整列大小,请在表单或单个元素上使用@horizontalLabelGridClass参数。这将调整<label>上的类,同级<div>的类将相应调整。

相关问题