新手问题 simple_form 在 bootstrap 里 class 设置失效?

jicheng1014 · 2014年11月20日 · 最后由 jicheng1014 回复于 2014年11月20日 · 3113 次阅读

今天被 simple_form 调戏了一下。

我写的一个小项目,原来一直没有用过 simple_form,后来觉得毕竟 simple_form 还是可以提高一些开发效率,并且学习一些新的东西没什么不好的。

我的小项目使用了 bootstrap3 作为前端, 依照官方的事例,使用了 rails generate simple_form:install --bootstrap命令,分别建立了 simple_form 和 simple_form_bootstrap.rb 文件

根据官方的事例,很快我修改了 simple_form_bootstrap 里的 wrappers,看起来一切正常

config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'col-sm-3 control-label'
    b.wrapper tag: 'div', class: 'col-sm-10' do |ba|
      ba.use :input, class: 'form-control'
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

之后 views 如下所示

<%= simple_form_for(@prisoner, html:{class: 'form-horizontal'},wrapper: :horizontal_form)  do |f| %>
  <%= f.input :name %>
  <%= f.input :idcard %>
  <%= f.input :gender, collection: ['男','女'], :as => :radio_buttons %>
  <hr class="inner-separator" />
  <%= f.button :submit %>
<% end %>

看起来一切正常不是么,理论上来说,效果应该是 label 有 col-sm-3 和 control-label 的 class,但是诡异的事情发生了

生成的代码如下所示

<div class="form-group string optional prisoner_idcard">
    <label class="string optional control-label" for="prisoner_idcard">身份证号</label>
    <div class="col-sm-9">
      <input class="string optional" id="prisoner_idcard" name="prisoner[idcard]" type="text" />
    </div>
</div>

我注意到了代码里有生成col-sm-9 这说明本身 wrapper 是正确加载了的 实际上是 use xxx,class 没有加载成功 折腾了半天,都没有什么思路, 再次仔细读官方的 demo, 后来才注意到,原来 Gemfile 里 Simple-form 版本有所不同

改为例子中所述版本后,问题解除,能够正确生成对应的 class 了 gem 'simple_form', '~> 3.1.0.rc1', github: 'plataformatec/simple_form', branch: 'master'

但是感觉还是有点奇怪 总觉得官方文档这个给的似乎太含糊了,好歹应该有点说明或者其他的 或者是我压根没有正确阅读官方文档?

你的用的 cdn 吗?使用那个命令,好像要下载 bootstrap 到本地 assets 里面

#1 楼 @michael_roshen 不是 cdn 的 在 wrapbootstrap 买的一个主题自己整合了下

需要 登录 后方可回复, 如果你还没有账号请 注册新账号