simple_form不应用引导

我已经设置了一个simple_form联系页面，但bootstrap似乎只适用于h3和发送消息按钮，但不适用于窗体本身。simple_form不应用引导

这可能是什么原因造成的？

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

使用下面的资源，但迄今为止，在结果没有变化：

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>

来源

2014-01-31 Jadam

我的头上没有RoR编译器，所以也可以为我们这些不使用RoR的HTML输出提供渲染。 – nickdos

你在使用Bootstrap 3吗？ simple_form尚不完全支持它。您将需要调整初始化程序以处理新的表单布局。下面是一个包含更多信息的链接： https://github.com/rafaelfranca/simple_form-bootstrap/pull/28 – emptywalls

您是否尝试过直接将自己的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>

你对远程窗体结构的工作方式，但你不需要远程的这种情况下，它的外观。

来源

2014-01-31 05:11:31 Alexander

是的，尝试过，没有任何运气。 – Jadam

simple_form不应用引导

回答

相关问题