我在两个 Rails 3.2 项目中使用 SimpleForm 和 Twitter Bootstrap。不幸的是,我的表单在其中一个项目中没有正确呈现。
所有相关的宝石都是相同的版本。
正确显示的字段如下所示:
<form id="new_user" class="simple_form form-horizontal" novalidate="novalidate" method="post" action="/users" accept-charset="UTF-8" name="new_user">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8"> <input type="hidden" value="I/WorRCjNpv7gnccGkL6/LETTgn6ao6Ycrgm0ky2slM=" name="authenticity_token">
</div>
<div class="control-group string required">
<label class="string required control-label" for="user_first_name"><abbr title="required">*</abbr> First name</label>
<div class="controls">
<input id="user_first_name" class="string required" type="text" size="50" name="user[first_name]">
</div>
</div>
<div class="control-group string required">
<label class="string required control-label" for="user_last_name"><abbr title="required">*</abbr> Last name</label>
<div class="controls">
<input id="user_last_name" class="string required" type="text" size="50" name="user[last_name]">
</div>
</div>
<div class="control-group email required">
<label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label>
<div class="controls">
<input id="user_email" class="string email required" type="email" size="50" name="user[email]">
</div>
</div>
<div class="control-group password required">
<label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label>
<div class="controls">
<input id="user_password" class="password required" type="password" size="50" name="user[password]">
</div>
</div>
<div class="control-group password optional">
<label class="password optional control-label" for="user_password_confirmation">Password confirmation</label>
<div class="controls">
<input id="user_password_confirmation" class="password optional" type="password" size="50" name="user[password_confirmation]">
</div>
</div>
<div class="control-group boolean optional">
<label class="boolean optional control-label" for="user_admin">Admin</label>
<div class="controls">
<input type="hidden" value="0" name="user[admin]"> <label class="checkbox"><input id="user_admin" class="boolean optional" type="checkbox" value="1" name="user[admin]"></label>
</div>
</div>
<div class="control-group string required">
<label class="string required control-label" for="user_company"><abbr title="required">*</abbr> Company</label>
<div class="controls">
<input id="user_company" class="string required" type="text" size="50" name="user[company]">
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary" type="submit" value="Create User" name="commit"> <a class="btn" href="/users"><span class="translation_missing" title="translation missing: en.helpers.links.cancel">Cancel</span></a>
</div>
</form>
而不正确的则呈现如下:
<form id="new_user" class="simple_form form-horizontal" novalidate="novalidate" method="post" action="/users" accept-charset="UTF-8" name="new_user">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8"> <input type="hidden" value="TR4q4W8cEl82hI6+bebVsoYp8WD3k2xsyhhf1UXzCYg=" name="authenticity_token">
</div>
<div class="input string required">
<label class="string required control-label" for="user_first_name"><abbr title="required">*</abbr> First name</label> <input id="user_first_name" class="string required" type="text" size="50" name="user[first_name]">
</div>
<div class="input string required">
<label class="string required control-label" for="user_last_name"><abbr title="required">*</abbr> Last name</label> <input id="user_last_name" class="string required" type="text" size="50" name="user[last_name]">
</div>
<div class="input email required">
<label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label> <input id="user_email" class="string email required" type="email" size="50" name="user[email]">
</div>
<div class="input password required">
<label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label> <input id="user_password" class="password required" type="password" size="50" name="user[password]">
</div>
<div class="input password optional">
<label class="password optional control-label" for="user_password_confirmation">Password confirmation</label> <input id="user_password_confirmation" class="password optional" type="password" size="50" name="user[password_confirmation]">
</div>
<div class="input boolean optional">
<input type="hidden" value="0" name="user[admin]"> <label class="boolean optional control-label checkbox" for="user_admin"><input id="user_admin" class="boolean optional" type="checkbox" value="1" name="user[admin]"> Admin</label>
</div>
<div class="form-actions">
<input class="btn btn-primary" type="submit" value="Create User" name="commit"> <a class="btn" href="/users"><span class="translation_missing" title="translation missing: en.helpers.links.cancel">Cancel</span></a>
</div>
</form>
我在两个项目上都遵循了相同的步骤(据我所知)。为什么 Twitter Bootstrap 会导致两者呈现不同?还是 SimpleForm?