Предотвращение Bootstrap коллапс элемент из «прыгает»

Question

Я создал плагин Bootstrap коллапс использовать с моим списком часто задаваемых вопросов:

https://jsfiddle.net/2d8ytuq0/

<ul class="faq__questions"> 
    <li> 
    <a href="#" data-toggle="collapse" data-target="#faq__question_1">..</a> 
    <p class="collapse" id="faq__question_1">...</p> 
    </li> 
</ul> 

Проблема заключается в том, когда вы рухнуть обратно расширенное описание это своего рода «прыжки». Я думаю, что это происходит из-за нижнего поля, который имеет элемент p. Я попытался заменить его padding-bottom, но это не решило проблему. Есть ли способ исправить это, не нарушая оригинальную компоновку?

Answer 1

Эта проблема возникает из-за того, что ваш сложенный элемент имеет margin-bottom:15px.

Вашей новый HTML разметка

<div class="collapse" id="faq__question_1"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nesciunt rerum mollitia nobis corporis sint error quaerat cupiditate animi doloribus! Voluptas dolores, incidunt perspiciatis labore velit libero minus consequuntur blanditiis.</p> 
</div> 

Answer 2

Просто добавьте этот CSS для переопределения полого property..This работает отлично

.faq__questions > li p { 
    margin: 0; 
}