表内/表行之间的Bootstrap崩溃不起作用 [英] Bootstrap collapse within table/between table rows not working
问题描述
我对Bootstrap折叠功能有疑问。我很确定我忽略了一些非常明显或容易修复的东西,但我用Google搜索了很多并且使用了代码,但没有成功。
I have a question regarding the Bootstrap collapse feature. I'm pretty sure that I'm overlooking something quite obvious or easy to fix, but I googled it alot and played with the code, but without success.
我有一个帐户设置页面,其中用户的所有帐户信息都以类似于表的格式显示,最后一个表列的表格单元格总是如此包含一个编辑按钮来编辑该信息。当人们点击编辑时,编辑表格将在该表格行的正下方展开。
I have a "account settings" page, where all account information of a user is shown in a table-like format, with the table cells of the last table column always containing an "edit"-button to edit that information. When people click "edit", an edit form shall expand just beneath that table row.
我在上遵循了该计划http://twitter.github.com/bootstrap/javascript.html#collapse ,崩溃函数本身运行正常,但问题是每个表单总是在我的表上方展开,无论我点击哪个编辑按钮。我制作了它的样子截图。 http://imageshack.us/photo/my-images/834/problemyn .png / 而不是在整个表格之上,我希望它在特定行的下方展开,将下面的行向下推。
I followed the scheme at http://twitter.github.com/bootstrap/javascript.html#collapse , the collapse function itself works fine, but the problem is that each form always expands above my table, regardless of which edit button I click on. I made a screenshot of how it looks like. http://imageshack.us/photo/my-images/834/problemyn.png/ Instead of being above the whole table I want it to expand just beneath the specific row, pushing the lower rows down.
这里我的代码:
<table class="table">
<tbody>
<tr>
<td>Username</td>
<td><%= @user.name %></td>
<td><button class="btn btn-danger" data-toggle="collapse" data-target="#username">Edit</button></td>
</tr>
<div id="username" class="collapse">
<div class="row">
<div class="span6 offset3">
<%= form_for(@user) do |form| %>
<%= render 'shared/error_messages', object: form.object %>
<%= form.label :name, "Change Username" %>
<%= form.text_field :name %>
<%= form.submit "Save changes", class: "btn btn-primary" %>
<% end %>
</div>
</div>
</div>
<tr>
<td>Email</td>
<td><%= @user.email %></td>
<td><button class="btn btn-danger" data-toggle="collapse" data-target="#email">Edit</button></td>
</tr>
<div id="email" class="collapse">
<div class="row">
<div class="span6 offset3">
<%= form_for(@user) do |form| %>
<%= render 'shared/error_messages', object: form.object %>
<%= form.label :email, "Change Email" %>
<%= form.text_field :email %>
<%= form.submit "Save changes", class: "btn btn-primary" %>
<% end %>
</div>
</div>
</div>
<tr>
<td>Password</td>
<td>Last time updated: <%= @user.updated_at %></td>
<td><button class="btn btn-danger" data-toggle="collapse" data-target="#password">Edit</button></td>
</tr>
<div id="password" class="collapse">
<div class="row">
<div class="span6 offset3">
<%= form_for(@user) do |form| %>
<%= render 'shared/error_messages', object: form.object %>
<%= form.label :password, "Change Password" %>
<%= form.text_field :password %>
<%= form.label :password_confirmation, "Confirm Password" %>
<%= form.password_field :password_confirmation %>
<%= form.submit "Save changes", class: "btn btn-primary" %>
<% end %>
</div>
</div>
</div>
<tr>
<td>Language</td>
<td>English</td>
<td><button class="btn btn-danger" data-toggle="collapse" data-target="#language">Edit</button></td>
</tr>
<div id="language" class="collapse">
<div class="row">
<div class="span6 offset3">
<!-- code for language form -->
</div>
</div>
</div>
<tr>
<td>Avatar</td>
<td><%= avatar_status %></td>
<td><button class="btn btn-danger" data-toggle="collapse" data-target="#demo">Edit</button></td>
</tr>
<div id="demo" class="collapse">
<div class="row">
<div class="span6 offset3">
<%= form_for(@user) do |form| %>
<%= form.label :avatar %>
<%= form.file_field :avatar %>
<%= form.submit "Add avatar", class: "btn btn-primary" %>
<% end %>
</div>
</div>
</div>
</tbody>
</table>
推荐答案
对不起,我不会有满意的答案。不允许将< tr>
元素作为< tbody>
的后代以外的任何内容,以便您的HTML无效。这是引起毛病行为的原因。您最好的选择是将表单的每个部分包装在一个新的表
元素中。
Hi I'm sorry I won't have a satisfying answer. It is not allowed to have anything other than <tr>
elements as descendants of <tbody>
so your HTML is not valid. This is what causes the glitchy behavior. Your best bet is to wrap every part of your form in a new table
element.
这篇关于表内/表行之间的Bootstrap崩溃不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!