Question

我在Bootstrap导航栏中有一个超级菜单，因为内容块的高度不同，我使用Isotope来适应它们

<ul class="row" id="isotope">
    <li class="isotope-item col-sm-4 col-md-3"> <a href="#">Auto</a> </li>
    <li class="isotope-item col-sm-4 col-md-3"> <a href="#">Autocarri</a>
        <ul>
            <li> <a href="#">Autobetoniere</a> </li>
            <li> <a href="#">Cassone fisso e Centinati</a> </li>
            <li> <a href="#">Con Gru</a> </li>
            <li> <a href="#">Frigoriferi</a> </li>
            <li> <a href="#">Mezzi d'opera</a> </li>
            <li> <a href="#">Motrici</a> </li>
        </ul>
    </li>
    <li class="isotope-item col-sm-4 col-md-3"> <a href="#">Carrelloni - Rimorchi - Semirimorchi</a> </li>
    <li class="isotope-item col-sm-4 col-md-3"> <a href="#">Dumper</a> </li>
    <li class="isotope-item col-sm-4 col-md-3"> <a href="#">Escavatori</a>
        <ul>
            <li> <a href="#">Escavatori Cingolati</a> </li>
            <li> <a href="#">Escavatori Gommati</a> </li>
        </ul>
    </li>
    ...
</ul>

问题是如果我打开mega菜单，所有块都会折叠在彼此之上：here is a fiddle

如果我调整窗口大小然后它们正确对齐（也就是同位素开始工作）。
如果我在页面加载时force the mega menu opened，它们也正确对齐

我错在哪里？我无法找到解决方案感谢

Answer 1

根据本文找到解决方案：http://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/

var $container = $( "#isotope" );
$( ".dropdown" ).each(function () {
    var $this = $(this);
    $this.on( "shown.bs.dropdown", function () {
        $container.masonry({
            itemSelector: ".isotope-item"
        });
    });
});

http://jsfiddle.net/z4jugbks/2/

Bootstrap mega菜单和Isotope.js：项目在页面加载时折叠

1 个答案: