Bootstrap 折叠元素

Question

我正在使用 Bootstrap 3 制作响应式网站。但是，我正在制作 "portfolio".

你可以在这里看到这个网站以及我的"error"。

向下滚动到 "Our models" 并单击 "Informations"。当您单击该按钮时，它会在模型的个人资料图片下方折叠一个新元素。

但是该可折叠元素会将元素下方的图片向右推一列。

我想我不必在此处放置代码，因为您只需右键单击 > 源代码即可。

此外，这是我在 Stack Overflow 上的第一个问题，如果格式不正确，我深表歉意。感谢大家的帮助。

Answer 1

您可以将折叠 div 的 CSS position 属性更改为 absolute。这样，该元素将浮动在下面的项目上 - 但您必须稍微应用样式。

试试看：

.model-outer div.collapse {
    position: absolute; 
    z-index: 1000; 
    background-color: white; 
    width:100%;
    left:0px;
    margin-top:10px;
}

你看，定位和样式不是很好，但我想你可以从那里开始。

Answer 2

既然您已经在使用 Bootstrap，我建议您使用默认的 bootstrap dropdown。当前代码的问题是显示信息的 div 不是绝对定位的。因此，每当显示 div 时，它都会占用额外的 space 并破坏网格的布局。 Bootstrap 下拉菜单使用绝对定位 div 因此它不会破坏布局。尝试使用它，它肯定会解决这个问题。

Bootstrap 折叠元素

Bootstrap Collapse over an element

javascript

jquery

twitter-bootstrap

collapse