simple_form 不应用引导程序答案

【问题标题】：simple_form not applying bootstrapsimple_form 不应用引导程序
【发布时间】：2014-01-31 04:39:34
【问题描述】：

我已经设置了一个 simple_form 联系页面，但引导程序似乎只应用于 h3 和发送消息按钮，而不是表单本身。

这可能是什么原因？

<div class="container">
  <h3>Shoot us a message</h3>

  <%= simple_form_for @contact, :html => {:class => 'form-group' } do |f| %>
    <%= f.input :name, :input_html => { :class => "span6" } %>
    <%= f.input :email, :input_html => { :class => "span6" } %>
    <%= f.input :message, :as => :text, :required => true %>
    <div class= "hidden">
      <%= f.input :nickname, :hint => 'Leave this field blank!' %>
    </div>
    <div>
      </br>
      <%= f.button :submit, 'Send message', :class=> "btn btn-primary" %>
    </div>
  <% end %>
</div>

一直在使用以下资源，但到目前为止结果没有变化：

http://simple-form-bootstrap.plataformatec.com.br/articles/7/edit https://github.com/plataformatec/simple_form

HTML 输出：

<!DOCTYPE html>
<html>
<head>
  <title>Streetheart</title>
  <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/masonry/transitions.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/bootstrapcss.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/contacts.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/pages.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/profiles.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/masonry/jquery.masonry.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/pages.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/profiles.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="5cR8ezM88QtJ4ORslrnQQ0/b8p0tihvpVZqCU1/c3cI=" name="csrf-token" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<div class="container">
  <h3>Shoot us a message</h3>

  <form accept-charset="UTF-8" action="/contacts" class="simple_form new_contact" id="new_contact" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="5cR8ezM88QtJ4ORslrnQQ0/b8p0tihvpVZqCU1/c3cI=" /></div>
    <div class="control-group string required contact_name"><label class="string required control-label" for="contact_name"><abbr title="required">*</abbr> Name</label><div class="controls"><input class="string required" id="contact_name" name="contact[name]" type="text" /></div></div>
    <div class="control-group email required contact_email"><label class="email required control-label" for="contact_email"><abbr title="required">*</abbr> Email</label><div class="controls"><input class="string email required" id="contact_email" name="contact[email]" type="email" /></div></div>
    <div class="control-group text required contact_message"><label class="text required control-label" for="contact_message"><abbr title="required">*</abbr> Message</label><div class="controls"><textarea class="text required" id="contact_message" name="contact[message]">
</textarea></div></div>
    <div class="control-group string optional contact_nickname"><label class="string optional control-label" for="contact_nickname">Nickname</label><div class="controls"><input class="string optional" id="contact_nickname" name="contact[nickname]" type="text" /><p class="help-block">Leave this field blank!</p></div></div>
    </br>
    <input class="btn btn btn-primary" name="commit" type="submit" value="Send message" />
</form></div>  
</body>
</html>

【问题讨论】：

我的脑子里没有 RoR 编译器，所以为我们这些不使用 RoR 的人提供渲染的 HTML 输出可能会很有用。
您使用的是 Bootstrap 3 吗？ simple_form 还不完全支持它。您将需要调整初始化程序以处理新的表单布局。这是包含更多信息的链接：github.com/rafaelfranca/simple_form-bootstrap/pull/28

标签： ruby-on-rails twitter-bootstrap simple-form

【解决方案1】：

您是否尝试过像这样直接将 html 应用到表单元素？

<div class="container">
  <h3>Shoot us a message</h3>

  <%= simple_form_for @contact, :class => 'form-group' do |f| %>
    <%= f.input :name, :class => "span6" %>
    <%= f.input :email, :class => "span6" %>
    <%= f.input :message, :as => :text, :required => true %>
    <%= f.input :nickname, :class => "hidden", :hint => 'Leave this field blank!' %>
    </br>
    <%= f.button :submit, 'Send message', :class=> "btn btn-primary" %>
  <% end %>
</div>

您拥有它的方式适用于远程表单构造，但从外观上看，您不需要远程表单构造。

【讨论】：