Ruby on rails Rails-将设计表单划分为单独的选项卡，并使用一个按钮提交

抱歉，我还在学习rails。试图用一个更新按钮将我的编辑rails设计表单分离到同一页面中的单独选项卡中。然后，用户可以在选项卡之间切换，并在准备就绪时按update。我已经设法使我的视图看起来正确，但每当有人单击“更新”时，什么都不会发生。我在下面提供了我的相关代码。非常感谢你

edit.html.erb

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= devise_error_messages! %>
 <div class="col-md-12">
  <div class="tabbable-panel">
   <div class="tab-content">
    <div id="trending71" class="tab-pane fade in active"><br>
    <div class="col-md-5">
    </div>
    <div class="col-md-4">
    <div class="form-group">
    <%= f.label :avatar, class: 'col-sm-2 control-label' %>
    <%= f.file_field :avatar %><br />
    </div>
<br>
    <div class="form-group">
     <%= f.label :background, class: 'col-sm-2 control-label' %>
      <div class="col-sm-6">
       <%= f.file_field :background %><br />
      </div>
    </div>
    </div>
   <div class="col-md-3">
   </div>
  </div>
 <div id="fire" class="tab-pane fade">
  <br>
  <div class="col-md-5">
  </div>
  <div class="col-md-4">
   <div class="container">
    <div class="field">
     <%= f.label :homecity %><br>
     <%= f.collection_select :homecity_id, Homecity.all, :id, :Hometown %>
    <div>
   </div>
  </div>
  <div class="col-md-3">
  </div>
 </div>
 <div id="essos" class="tab-pane fade">
  <br>
  <div class="col-md-5">
  </div>
  <div class="col-md-4">
   <h2>Cancel my account</h2>
   <p>Unhappy?
   <br>
   <br>
   <%= button_to "Cancel my account", registration_path(resource_name), class: "btn btn-danger", data: { confirm: "Are you sure? You cannot undo this." }, method: :delete %></p>
  </div>
  <div class="col-md-3">
  </div>
 </div>
</div>
<div class="container">
<div class="form-group">
<%= f.submit "Update", class: 'btn btn-lg btn-block btn-primary' %>
</div>
<% end %>
<div>

取消我的帐户
不开心？

---

塞巴斯蒂安指的是您的实际代码，而不仅仅是SO版本。试着更仔细地观察你的压痕。这应该起作用：

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= devise_error_messages! %>
<div class="col-md-12">
  <div class="tabbable-panel">
    <div class="tab-content">
      <div id="trending71" class="tab-pane fade in active"><br>
        <div class="col-md-4 col-md-offset-5">
          <div class="form-group">
            <%= f.label :avatar, class: 'col-sm-2 control-label' %>
            <%= f.file_field :avatar %><br />
          </div>
          <br>
          <div class="form-group">
            <%= f.label :background, class: 'col-sm-2 control-label' %>
            <div class="col-sm-6">
              <%= f.file_field :background %><br />
          </div>
          </div>
        </div>
        <div class="col-md-3">
        </div>
      </div>
      <div id="fire" class="tab-pane fade">
        <br>
        <div class="col-md-4 col-md-offset-5">
          <div class="container">
            <div class="field">
              <%= f.label :homecity %><br>
              <%= f.collection_select :homecity_id, Homecity.all, :id, :Hometown %>
            </div>
          </div>
        </div>
        <div class="col-md-3">
        </div>
      </div>
      <div id="essos" class="tab-pane fade">
        <br>
        <div class="col-md-4 col-md-offset-5">
          <h2>Cancel my account</h2>
          <p>Unhappy?
          <br>
          <br>
          <%= button_to "Cancel my account", registration_path(resource_name), class: "btn btn-danger", data: { confirm: "Are you sure? You cannot undo this." }, method: :delete %></p>
        </div>
        <div class="col-md-3">
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="form-group">
      <%= f.submit "Update", class: 'btn btn-lg btn-block btn-primary' %>
    </div>
  </div>
</div>
<% end %>

取消我的帐户
不开心？

错误的缩进通常会导致html看起来非常混乱。在您的情况下，您可能没有注意到，因为页面很简单，或者只是没有在视觉上把它弄乱。在任何情况下，一旦html加载到浏览器中，浏览器将自动关闭所有挂起的标记。这意味着您的表单标记可能在按钮标记或类似的东西之前关闭，因此按钮不再是表单的一部分

---

我还稍微调整了引导列。您可以使用col-md-offset-5，而不是在col-md-5类中放置一个空div。使您的代码更短。您可能还希望使用“row”类来分隔行（这样就可以去掉空的col-md-3 div）。我建议你们再看看引导网格系统。祝你好运

Sebastian指的是您的实际代码，而不仅仅是SO版本。试着更仔细地观察你的压痕。这应该起作用：

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= devise_error_messages! %>
<div class="col-md-12">
  <div class="tabbable-panel">
    <div class="tab-content">
      <div id="trending71" class="tab-pane fade in active"><br>
        <div class="col-md-4 col-md-offset-5">
          <div class="form-group">
            <%= f.label :avatar, class: 'col-sm-2 control-label' %>
            <%= f.file_field :avatar %><br />
          </div>
          <br>
          <div class="form-group">
            <%= f.label :background, class: 'col-sm-2 control-label' %>
            <div class="col-sm-6">
              <%= f.file_field :background %><br />
          </div>
          </div>
        </div>
        <div class="col-md-3">
        </div>
      </div>
      <div id="fire" class="tab-pane fade">
        <br>
        <div class="col-md-4 col-md-offset-5">
          <div class="container">
            <div class="field">
              <%= f.label :homecity %><br>
              <%= f.collection_select :homecity_id, Homecity.all, :id, :Hometown %>
            </div>
          </div>
        </div>
        <div class="col-md-3">
        </div>
      </div>
      <div id="essos" class="tab-pane fade">
        <br>
        <div class="col-md-4 col-md-offset-5">
          <h2>Cancel my account</h2>
          <p>Unhappy?
          <br>
          <br>
          <%= button_to "Cancel my account", registration_path(resource_name), class: "btn btn-danger", data: { confirm: "Are you sure? You cannot undo this." }, method: :delete %></p>
        </div>
        <div class="col-md-3">
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="form-group">
      <%= f.submit "Update", class: 'btn btn-lg btn-block btn-primary' %>
    </div>
  </div>
</div>
<% end %>

取消我的帐户
不开心？

错误的缩进通常会导致html看起来非常混乱。在您的情况下，您可能没有注意到，因为页面很简单，或者只是没有在视觉上把它弄乱。在任何情况下，一旦html加载到浏览器中，浏览器将自动关闭所有挂起的标记。这意味着您的表单标记可能在按钮标记或类似的东西之前关闭，因此按钮不再是表单的一部分

---

我还稍微调整了引导列。您可以使用col-md-offset-5，而不是在col-md-5类中放置一个空div。使您的代码更短。您可能还希望使用“row”类来分隔行（这样就可以去掉空的col-md-3 div）。我建议你们再看看引导网格系统。祝你好运

你有一个严重的缩进问题。Sebastian我知道我尝试过几次（我花了30分钟尝试），但一直给我troubleRef链接：或者使用jquery你有一个严重的缩进问题。Sebastian我知道我尝试过几次（我花了30分钟尝试）但我一直在给我troubleRef链接：或者使用jquery