Question

我将rails4与bootstrap和simple_form用于嵌套模型。我想使用tabs bootstrap将Order对象的字段渲染到不同的选项卡中。这是我的simple_form：

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

我无法以适当的方式使用它。实际上它没有按顺序tabs。谢谢你的帮助。

Answer 1

第6行：<ul class="tab-content">应该是div。嵌套的所有li代码也应为div。请参阅Bootstrap page，您将找到结构：

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

首先尝试修复它以查看它是否有效:)我不太确定它们是否允许这些标签像您的解决方案一样嵌套但只是先尝试一下。

rails 4，simple_form，嵌套模型引导选项卡

1 个答案: