Question

我对Bootstrap折叠功能有疑问。我很确定我忽略了一些非常明显或容易修复的东西，但我用Google搜索了很多并且使用了代码，但没有成功。

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

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

Answer 1

要折叠表格行，您应该为折叠的行写下额外的css：

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

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

Answer 2

嗨，对不起，我不会得到令人满意的答案。除了<tr>的后代之外，不允许使用<tbody>个元素以外的任何内容，因此您的HTML无效。这就是导致故障行为的原因。最好的办法是将表单的每个部分都包含在一个新的table元素中。

表内/表行之间的Bootstrap崩溃不起作用

2 个答案: