Rails中Bootstrap 4表单助手date_field与select样式设置问题

先来说你遇到的date_field报错问题——看你写的代码，明显是语法上的小失误！你把class参数放在了date_field方法调用的外面，多了个多余的右括号，Rails肯定会报错的。

修正后的date_field代码 #

<div class="form-group row">
  <%= form.label :appointment, :class => 'col-md-3 col-form-label text-md-right' %>
  <div class="col-md-9">
    <%= date_field(:patient, :appointment, :class => 'form-control') %>
  </div>
</div>

注意哦，date_field的最后一个参数是选项哈希，class要放在这个哈希里，和前面的参数放在同一个括号里，不能单独拎出来！另外你原来的:apointment拼写错啦，应该是:appointment，这个小细节也别忽略～

再来说select助手的样式设置 #

虽然你没贴具体代码，但Rails里给select加Bootstrap样式最常见的坑是参数顺序搞混。select助手的参数顺序是：属性名、选项数组、选项配置哈希（比如提示文本）、HTML属性哈希（比如class）。

举个正确的例子：

<div class="form-group row">
  <%= form.label :gender, :class => 'col-md-3 col-form-label text-md-right' %>
  <div class="col-md-9">
    <%= form.select :gender, ['男', '女', '其他'], { prompt: '请选择性别' }, { class: 'form-control' } %>
  </div>
</div>

这里要注意，第三个参数是配置选项（比如prompt），第四个参数才是HTML属性，必须分开写两个哈希，不能合并，否则样式不会生效哦。

额外小提醒 #

• 确保你已经正确引入了Bootstrap 4的CSS文件，不然加了form-control类也看不到效果
• 整个表单最好放在<form>标签里，并且外层可以套个.container或者.container-fluid来保证布局正常

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