Bootstrap 4 Складная карта - Чоппи-анимация

Я использую Bootstrap 4 и создал карту с заголовком .card-header и .card-block следующим образом:

<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="card-block">
        card block
    </div>
</div>

Я хочу, чтобы можно было щелкнуть заголовок карты, чтобы переключить блок карты. Я пробовал использовать механизм свертывания Bootstrap (вы заметите data-toggle="collapse" в заголовке карты). Он работает - но анимация чрезвычайно изменчив.

Я не могу понять, почему. Вот пример кода.

Ответ 1

Негативная проблема:

Проблема заключается в классе .card-block, по умолчанию добавляет отступ 1.25rem.

Если вы удалите блок-класс класса из тестового блока div # и создадите div внутри с помощью блока классов класса (чтобы вы сохранили требуемое дополнение), проблема с задержкой исчезнет.

Актуальная проблема:

В вашем # тестовом блоке нет класса с коллапсом, поэтому его нужно добавить сначала. Вот почему он работает во второй попытке.

Если вы добавите класс с именем "collapse" в test-block div #, ваша отстающая проблема исчезнет.

Если вы хотите, чтобы панель открывалась по умолчанию, добавьте также класс "in". например "свернуть".

У меня есть следующий код:

<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="collapse">
        <div class="card-block">
            card block
        </div>
    </div>
</div>

Ответ 2

Вероятно, почему bootstrap 4 все еще находится в alpha. Вероятно, это будет исправление.

Единственное решение, которое я нашел, - это свернуть ваш card-block, добавив класс collapse, а затем удалив его заполнение с помощью css:

.card-block{ padding:0; }

Ответ 3

# test-block имеет состояние по умолчанию:

    <div id='test-block' class='card block'>

При щелчке после изменения класса в расширенную версию

    <div id='test-block' class="card-block collapse in" aria-expanded="true">

Таким образом, у div нет правильного состояния по умолчанию. Измените состояние, чтобы отобразить collapse in и aria-expanded=true, и для этого требуется всего 1 клик.

Я понятия не имею, почему анимация изменчивая.: (