Question

我已经设置了一个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>

Answer 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>

你使用它的方式适用于远程表单构造，但从这种情况看你不需要远程表单。

simple_form不应用bootstrap

1 个答案: