Ruby on rails rails 4，简单表单，嵌套模型引导选项卡

我将

rails4

与

bootstrap

和

simple\u form

一起用于嵌套模型。我想使用

tabs bootstrap

将Order对象的字段呈现到不同的选项卡中。 这是我的

简单表格

：

 <ul class="nav nav-tabs">
    <li><a href="#course" data-toggle="tab">Customer Form </a></li>
    <li><a href="#module1" data-toggle="tab">Order Forms</a></li>
    <li><a href="#module2" data-toggle="tab">Module2</a></li>    
</ul>
<ul class="tab-content">
    <li class="tab-pane active" id="course">
         <%= simple_form_for @customer,:html=>{:class => 'form-horizontal' }  do |f| %>
         <%= f.input :first_name,  :hint =>   'First Name' %>
         <%= f.input :last_name,  :hint => 'Last Name' %>
         <%= f.input :email, :label => false, :hint => 'Email' %>
         <%= f.input :address, :hint => 'Address' %>
         <%= f.input :customer_number, :hint => 'Customer Number'  %>
         <%= f.input :birthday, :as => :string,:label => false, :hint => 'Birthday'  %>   
    </li>
    <li class="tab-pane" id="module1">                   
         <%= f.simple_fields_for :orders do |builder| %>
 <ul class="nav nav-tabs">    
    <li><a href="#module1-step1" data-toggle="tab"><%= "#" %></a></li>
 <ul class="tab-content">
    <li class="tab-pane active" id="module1-step1">
                <p><%= render 'order_fields' , :f => builder %></p>
    </li>
 </ul>
                 <% end %>
 </ul>

{:class=>form horizontal}do | f |%>
'名字'%>
'姓氏'%>
false，：hint=>'电子邮件''>
'地址'%>
'客户编号'%>
：string，：label=>false，：hint=>“生日”%>






建筑商%>

我无法使它正常工作。实际上，它并没有按顺序创建

选项卡。
谢谢您的帮助。
第6行：
应该是一个
div
。所有嵌套的
li
标记也应该是
div
。请参阅，您将发现结构：

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>








...
...
...
...

首先尝试修复它，看看它是否有效：）我不太确定它们是否允许这些选项卡像您的解决方案一样嵌套，但请先尝试一下