stackoom
  简体   繁体   中英

simple_form not applying bootstrap

 原文  2014-01-31 04:39:34  2   1    ruby-on-rails/ twitter-bootstrap/ simple-form

Question

I've setup a simple_form contact page but bootstrap only seems to be getting applied to the h3 and the send message button but not to the forms themselves.

What could be the cause of this? 

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

Been using the following resources but thus far with no change in outcome:

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

HTML Output: 

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

1 answers

solution1
 0  2014-01-31 05:11:31

Have you tried directly applying your html to the form elements like so? 

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

The way you had it works for remote form constructs, but you don't need a remote one for this case by the look of it.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Integration of simple_form with bootstrap 3 simple_form bootstrap input Adapt bootstrap to simple_form Bootstrap Popover with Simple_Form using simple_form with bootstrap 3 Incorporating Bootstrap Form Helpers into simple_form simple_form validations with Bootstrap in Rails Create simple_form in bootstrap modal with haml Bootstrap 3.2.0 with Simple_form checkbox simple_form / bootstrap number field arrows
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM