Bootstrap 折叠一个元素答案

【问题标题】：Bootstrap Collapse over an elementBootstrap 折叠一个元素
【发布时间】：2015-10-13 06:12:32
【问题描述】：

我正在使用 Bootstrap 3 来制作响应式网站。但是，我正在制作一个“作品集”。

您可以在此处查看网站以及我的“错误”。

向下滚动到“我们的模型”，然后点击“信息”。当您单击该按钮时，它将在模型的个人资料图片下方折叠一个新元素。

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

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

另外，这是我关于 Stack Overflow 的第一个问题，如果格式不正确，我很抱歉。谢谢大家的帮助。

【问题讨论】：

标签： javascript jquery twitter-bootstrap collapse

【解决方案1】：

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

这样试试：

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

你看，定位和风格不是很好，但我认为你可以从那里开始。

【讨论】：

这很好，但我不知道如何正确定位。您如何看待经典 Bootstrap 的弹出框？我刚看到那个选项，看起来不错。
@DaleObradovic 也许你也可以使用那个——试试吧。不过，我在样式上添加了更多细节，现在看起来还不错。
感谢您的帮助，但我已更改为 @K K 所说的下拉菜单，因为它更容易并且完美地实现了我的想法..

【解决方案2】：

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

【讨论】：

我已经改变了投资组合，所以我现在使用下拉菜单而不是我的 div。感谢您的解决方案！