在bootstrap中向上/向下滑动

Question

我在bootstrap模板中创建一个带有向上/向下滑动动画的from。

以下是代码：http://bootply.com/94382

当您点击add按钮时，表单会向下滑动，当您再次单击它时，它会向上滑动。

但是如果我在按钮之后在页面上添加新元素，则新元素不会向下移动，而是表单将覆盖元素。

我希望实现新元素将向下滑动，然后形式将会出现。但现在这种情况并没有发生。请帮帮我。

Answer 1

首先从您的css中删除实际不需要的position:absolute，position:fixed。此外，使用具有适当样式的跨度或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