Свиването на Bootstrap в рамките на таблицата/между редовете на таблицата не работи

Имам въпрос относно функцията за свиване на 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>

person rails_has_elegance    schedule 17.05.2012    source източник
comment
Изображението вече е мъртва връзка, което прави въпроса по-неясен.   -  person Brian Tompsett - 汤莱恩    schedule 01.12.2016


Отговори (2)


Здравейте, съжалявам, че няма да получа задоволителен отговор. Не е разрешено да има нищо друго освен <tr> елементи като наследници на <tbody>, така че вашият HTML не е валиден. Това е причината за неуспешното поведение. Най-добрият ви залог е да обвиете всяка част от формуляра си в нов table елемент.

person Tinco    schedule 30.05.2012
comment
Е, мисля, че това всъщност е много задоволителен отговор! Сега разбирам защо бъгва толкова много. Ще се опитам да го оправя както казахте, с индивидуална таблица за всеки tr. Благодаря!! - person rails_has_elegance; 30.05.2012

За да свиете ред от таблица, трябва да напишете допълнителен css за свития ред:

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

Това ще коригира проблема с дисплея, след като редът се разшири.

person Qier LU    schedule 21.02.2014