html - Highslide 页内画廊被 Bootstrap 词缀破坏

Question

我的页面中有一个 highslide 画廊 http://civicsector.org.ua/multimeda/foto/208-akcya-geroyi-nezalezhnost.html

但是，该页面还在其顶部包含一个bootstrap 词缀，当您稍微向下滚动页面时会出现该词缀。

如果您打开页面并等待(不执行滚动)直到图库完全加载，则图库将按照应有的方式放置。

但是，如果在那之后您向下滚动以便显示词缀，然后单击以查看下一张图片，整个< strong>gallery 向上移动，这样它实际上覆盖了包含文章文本的前一个布局 block 。

似乎在 bootstrap 词缀出现时应该触发某种画廊“刷新”，以便 highslide 重新计算画廊位置。我该如何实现？

谢谢。

Answer 1

当 affix 启动时，附加的 div 会从页面的正常流中移除，这会导致父 div div 折叠。

修复:将附加的 div 包裹在一个新的 div 中。给这个 dix 两个不同的 height，或者隐藏它，基于附加 div(菜单)的断点 - 这似乎是 1199px 和 979px。

HTML:

<div class="affix-wrapper">
    <div data-spy="affix" data-offset-top="250" class="your classes here">
        <!-- content of the div -->
    </div>
</div>

CSS:

.affix-wrapper {
    height: 70px;
}
@media (max-width: 1199px){
    .affix-wrapper {
        height: 139px;
    }
}
@media (max-width: 979px){
    .affix-wrapper {
        display: none;
    }
}