表格内/表格行之间的Bootstrap折叠不起作用

Question

我有一个关于Bootstrap折叠功能的问题。我相信我正在忽略一些很明显或容易解决的东西，但是我搜索了很多并且尝试了代码，但没有成功。

我有一个“账户设置”页面，在表格格式中显示用户的所有账户信息，最后一列的表格单元始终包含一个“编辑”按钮以编辑该信息。当人们点击“编辑”时，将在该表行下方展开一个编辑表单。

我遵循http://twitter.github.com/bootstrap/javascript.html#collapse的方案，折叠功能本身运行良好，但问题是每个窗体始终在我的表格上面展开，而不管我点击哪个编辑按钮。我拍了一张截图，看起来像这样：http://imageshack.us/photo/my-images/834/problemyn.png/。我希望它只在特定行下方展开，将较低的行向下推。

这是我的代码：

<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:&nbsp;<%= @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>

- rails_has_elegance

---

图片现在是一个失效的链接，使问题不够清晰。 - Brian Tompsett - 汤莱恩

Answer 1

要折叠表格行，您需要为折叠的行编写额外的CSS：

table .collapse.in {
    display: table-row !important;
}

它将修复行展开后的显示问题。

- Qier LU

Answer 2

你好，很抱歉我无法提供一个令人满意的答案。在 <tbody> 元素下只允许有 <tr>元素作为其子元素，所以你的HTML代码是不合法的。这就是导致问题出现的原因。最好的解决办法是用一个新的 table 元素来包含你表单的每个部分。

- Tinco

---

好的，我认为这实际上是一个非常令人满意的答案！现在我明白为什么它会出现那么多故障了。我会按照你说的方法尝试修复它，为每个tr创建一个单独的表格。谢谢！！ - rails_has_elegance