сползая вверх/вниз форма в bootstrap

Question

Я создаю из с выдвижной вверх/вниз анимацией в шаблоне бутстрапа.

Вот код: http://bootply.com/94382

При нажатии на кнопку add, форма будет скользить вниз, и когда вы щелкните по нему еще раз, он будет скользить вверх.

Но если я добавляю новые элементы на странице после кнопок, новые элементы не перемещаются вниз, а форма выходит за элементы.

Я хочу, чтобы новые элементы соскользнули вниз, а затем форма придет. Но сейчас этого не происходит. Пожалуйста, помогите мне.

Answer 1

Прежде всего удалите position:absolute, position:fixed из вашего css, где это действительно не требуется. Кроме того, используйте пробелы или список ul li с соответствующими стилями для отображения значков, кнопок, изображений в <div id="bottom-header">. Затем удалите position:absolute из вашей формы и укажите нужную ширину поля и т. Д., Чтобы получить то, что вы ожидали.

Answer 2

Замените #sliding_form свойства CSS для:

#sliding-form { 
    display: none; 
    background-color: #eee; 
    width: 45%; 
    margin-top: 60px; 
    overflow: hidden; 
} 

Updated Bootply