javascript - 防止 Bootstrap 从 "jumping"折叠元素

标签 javascript jquery html css twitter-bootstrap

我已经设置了一个 Bootstrap 折叠插件以用于我的常见问题列表:

https://jsfiddle.net/2d8ytuq0/

<ul class="faq__questions">
  <li>
    <a href="#" data-toggle="collapse" data-target="#faq__question_1">..</a>
    <p class="collapse" id="faq__question_1">...</p>
  </li>
</ul>

问题是当你折叠扩展描述时它有点“跳跃”。我认为这是由于 p 元素的底部边距所致。我尝试用 padding-bottom 替换它,但这并没有解决问题。有没有办法在不破坏原始布局的情况下解决这个问题?

最佳答案

这个问题是因为你折叠的元素有一个margin-bottom:15px

您的新 HTML 标记

<div class="collapse" id="faq__question_1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nesciunt rerum mollitia nobis corporis sint error quaerat cupiditate animi doloribus! Voluptas dolores, incidunt perspiciatis labore velit libero minus consequuntur blanditiis.</p>
</div>

关于javascript - 防止 Bootstrap 从 "jumping"折叠元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37023478/

相关文章:

javascript - 在 ASP.NET MVC 中管理 js 和 css 文件

javascript - 带正方形的特殊布局 div 正方形

javascript - 如何选取类的span标签中的内容

javascript - 为 TH 伪元素添加点击事件,从 TH 获取数据属性并防止 TH 事件在点击时触发

javascript - 如何避免 data-id 从 php 循环返回表元素的相同 id

javascript - 自动强制移动浏览器到桌面 View

Javascript Facebook 登录按钮在登录后不会更改为注销

javascript - 按解决/执行时间的顺序解决 promise ?

javascript - 解析分组的json

javascript - 替代图像而不是替代文本