程序员经验分享-hwhale

100%高度手风琴“跳跃”

2024-01-31

我正在尝试使用 Twitter Bootstrap 折叠组件实现 100% 高度的手风琴，完全如此中所述question https://stackoverflow.com/questions/16064809/twitter-bootstrap-accordion-full-height-panes.

我正在手动设置高度.accordion-inner在此描述的元素answer https://stackoverflow.com/a/16545225/295813.

但是，在展开/折叠面板时，我遇到了“弹性”行为。我已经删除了所有填充/边距/边框.accordion-inner消除这种可能性的要素。

这个问题在 IE10 中最为明显，但在 Chrome 中也很明显。

看到这个example http://plnkr.co/edit/T47PZDmZhSjnaMMOh928?p=preview.

有什么想法导致这种“神经兮兮”的行为吗？


聚会迟到了，但是：

我遇到了类似的问题，并注意到，如果我从折叠元素下方的元素中删除 margin-top，并将其替换为 padding-top，则过渡会很平滑。

因此 - 检查相邻元素的边距，如果可能的话，尝试用填充替换它们。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

twitterbootstrap

100%高度手风琴“跳跃” 的相关文章

  • :target 伪类在 Firefox 中无法正常工作

    我正在使用 target 伪类制作一个具有 CSS 灯箱类型效果的页面 当您单击图像时 会弹出一个包含信息的框 当您单击任意位置时 该框会再次消失 它在 Chrome 和 IE 中运行良好 但在 Firefox 中存在一个奇怪的错误当您将鼠

  • 具有一个 css 类的堆叠图标

    在新的 FontAwesome 4 0 0 中 堆叠项目有 css 样式 span class fa stack i class fa fa square o fa stack 2x i i class fa fa twitter fa s

  • 理解

    我正在尝试在网站中使用所选的图像 假设我有一个简单的网站 用户可以使用以下命令从系统中选择图像

  • Javascript 放大/缩小到鼠标 x/y 坐标

    我设法让鼠标拖动来滚动div 但是用鼠标放大 缩小不完整 它有效 但我希望鼠标指针将图像保持在该位置并同时缩放它 如下所示 我需要使用scrollBy 将滚动返回到缩放之前的上一点 有人知道该怎么做吗 这是某人制作的小提琴https jsf

  • 如何在禁用的 HTML 按钮上呈现工具提示

    我有一个 HTML 按钮 我尝试根据按钮的 标题 属性在其上渲染工具提示 但它没有渲染 主要是因为它被禁用了 然后 我尝试将按钮包装在跨度中并设置跨度的 标题 属性 将鼠标悬停在包含在跨度中的按钮上仍然没有效果 工具提示将呈现在不属于按钮标

  • 需要正则表达式（使用 C#）将所有空白压缩为单个空白

    我需要将文档中的多个空格替换为单个空格 每次迭代 无论它们是空格 制表符还是换行符 任何类型的空格的任何组合都需要被截断为单个空格 假设我们有字符串 Hello t t n t n world 其中 t 和 n 分别代表制表符和换行符 那么

  • Twitter Bootstrap - 多图像（缩略图）轮播 - 一次移动一个缩略图

    我正在尝试 Twitter bootstrap 3 我对 HTML CSS 和 Javascript 还很陌生 我有一个我创建的轮播 它的代码如下所示 div class container div class carousel slide

  • css 字体 twitter 像关闭按钮一样，我错过了什么？

    twitter 有一个关闭按钮 它是单个字符 x 我需要类似的东西 但是在我检查之后 span x span 我按照 firebug 告诉我的那样创建 css 规则 close button font family Tahoma Arial

  • Webpack 和 Angular HTML 图像加载

    我一直对 webpack 和 Angular 感到头疼 这可能有一个简单的答案 但我无法弄清楚 我已经阅读了堆栈溢出中关于这个主题的几乎所有答案 但都无济于事 我有一个像这样的 html 页面 还有其他包含图像的模板 img

  • Rails Active Admin css 与 Twitter Bootstrap css 冲突

    我对 Rails 资产管道有点陌生 所以我可能做错了什么 我正在尝试为我的后端使用 Active Admin 为我的前端应用程序使用 twitter bootstrap css 我将 bootstrap css 添加到 应用程序 资产 样式

  • 数据表“footerCallback”函数未在页脚中显示结果

    我尝试获取每列的总和并将结果显示在页脚中 我在用着 页脚回调 https datatables net reference option footerCallbackDatatables提供的功能 但是它在页脚中没有显示任何内容 数据表解释

  • 模板中的 bson.ObjectId

    我有一个具有 bson ObjectId 类型的结构 例如如下所示 type Test struct Id bson ObjectId Name string Foo string 我想在 html 模板中呈现它 Name Food a h

  • 新BFC“清”浮箱

    如示例所示 应用display inline block 到包含块似乎 清除 了其中的浮动框 wrapper inline block display inline block left column background color te

  • (CSS) 倾斜 img 框架而不扭曲图像

    我正在制作一个包含许多倾斜元素的网站 如下所示 这还不错 CSS 转换可能会扭曲它 但是这个怎么样 图像没有扭曲 只是框架以倾斜的方式裁剪 最简单 最好的方法是什么 I think this http codepen io antiblan

  • CSS：如何在模糊的背景上剪切文本？

    我想重新创建以下样式 我想出了以下内容 问题是剪切不会影响模糊滤镜 我不知道如何解决它 这是我的 HTML 代码 glass width 40 height 100 position absolute background rgba 255

  • MVC4 捆绑：由于 css3 功能而缩小失败？

    我想使用 MVC4 捆绑和缩小 但我总是在未缩小的 css 文件中收到此错误消息作为注释 Minification failed Returning unminified contents 534 29 run time error CSS

  • CSS calc() 是否可以得到负值？

    假设我们有一个位于视口中心的容器 centered margin 0 auto width 960px 在该容器内 我有另一个容器 其宽度需要为视口宽度的 100 我可以将边距设置为 widest margin 0 480px 例如 问题是

  • 从 获取 byte[]

    我有一个 html 画布 如下所示 output is a base64string of image data var oldImage new Image oldImage onload function var resizeRatio

  • tr 元素周围的边框不显示？

    Chrome Firefox 似乎不渲染边框tr 但如果选择器是 它会渲染边框table tr td 如何在 tr 上设置边框 我的尝试 不起作用 table tr border 1px solid black table tbody tr

  • 使用 div 或表格来包含链接列更好吗？

    我的页面底部有 3 列链接 每列都放入一个 div 中 所有三个 div 都包装在页面中央的一个大 div 中 这是更适合桌子的东西还是桌子不适合这项工作 您还可以使用 ul http www w3schools com tags tag

随机推荐

热门标签