Блог

Предыстория

У меня есть форма со складными наборами полей. В этом примере каждый флажок открывает набор полей с помощью Bootstrap-Collapse.

https://codepen.io/vacoxudelpen/full/LYjOryP

Странный

Набор полей с легендой не (не) сворачивается плавно. Набор полей без легенды — это нормально.

Известное

Bootstrap анимирует элементы свертывания с overflow: hidden; height: 0; помощью .

По-видимому, браузеры не любят устанавливать высоту набора полей фактически равной 0 (нулю), если существует легенда.

Таким образом, анимация выполняется до тех пор, пока не будет видна только легенда, а затем показать / скрыть набор полей.

РЕДАКТИРОВАТЬ: Решение

Вырвите легенду из набора полей с float помощью . Решение в рамках codepen. Спасибо @beni-sinca

Это старая тема. <legend> элементы всегда были очень расплывчатыми, и вокруг было очень много несоответствий в браузере <legend> .

У меня, как ни странно, однажды была похожая задача, и мне удалось ее исправить, переместив элемент легенды и убедившись, что он имеет правильную ширину.

В вашем случае я думаю, что что-то подобное справилось бы с этой задачей:

 legend.col-form-label {
    float: left;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}