如何自定义ember-bootstrap的form.element修改输入框外层列尺寸

你可以通过两种方式自定义输入框外层容器的栅格类：

1. 针对单个表单组件配置 #

直接在form.element组件上传入@containerClass参数，替换默认的col-sm-10即可，示例如下：

<form.element 
  @controlType="text" 
  @label="First Name:" 
  @property="firstName"
  @containerClass="col-sm-8" {{!-- 替换为你需要的栅格类即可，比如col-md-6、col-sm-7等 --}}
/>

如果需要同步调整左侧标签的宽度，同步传入@labelClass参数即可：

<form.element 
  @controlType="text" 
  @label="First Name:" 
  @property="firstName"
  @labelClass="col-sm-3"
  @containerClass="col-sm-9"
/>

2. 全局配置统一修改所有表单默认值 #

如果项目里所有水平表单都要用统一的栅格比例，不用每个组件单独传参，可以在项目的config/environment.js文件中修改ember-bootstrap的全局配置：

module.exports = function(environment) {
  const ENV = {
    // 原有项目配置保持不变
    'ember-bootstrap': {
      form: {
        horizontalLabelClass: 'col-sm-4', // 左侧标签默认栅格类，可按需修改
        horizontalInputClass: 'col-sm-8' // 输入框容器默认栅格类，替换为你需要的尺寸
      }
    }
  };
  return ENV;
}

内容的提问来源于stack exchange，提问作者djmistral