Question

我使用Bootstrap 3制作响应式网站。但是，我正在制作一个＆＃34;投资组合＆＃34;。

您可以在此处查看网站以及我的错误＆＃34;。

向下滚动到＆＃34;我们的模型＆＃34;并点击＆＃34;信息＆＃34;。当您单击该按钮时，它将折叠模型的个人资料图片下方的新元素。

但是，可折叠元素正在将元素下方的图片推向一列的右侧。

我想我不必在此处放置代码，因为您只需点击右键＆gt;源代码吧。

另外，这是我关于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时，它会占用额外的空间并打破网格的布局。 Bootstrap下拉列表使用绝对定位div，因此它不会破坏布局。尝试使用它肯定会解决这个问题。

Bootstrap折叠元素

2 个答案: