Question

我正在使用多列下拉菜单，它使用django动态加载。我使用django模板标记，它似乎是在列高度添加空格。菜单分为4列，显示类别和子类别。有些类别有子类别（1个或多个），有些则没有。

                <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Prods<b class="caret"></b></a>

                        <ul class="dropdown-menu row">
                           {%for c in categ %}
                            <li class="col-sm-3">
                                <ul>                      
                                <li><a href="/">{{c.name}}</a></li>
                            {% for s in sub_cat %}                                   
                                <li><a href="/">{{s.name}}</a></li>                              
                            {% endfor %}
                                </ul>
                            </li>
                            {% endfor %}
                            <li class="col-sm-3">
                                <ul>  
                                <li class="dropdown-header"><a href="/>All</a>/li>
                                </ul>  
                            </li>
                        </ul>
                    </li>

这是我在第一张图片中得到的内容，以及我在第二张图片中需要实现的内容。

Answer 1

使用砌体js http://masonry.desandro.com/我能够实现您想要的布局。你只能使用引导网格来完成这项任务，因为浮动的div不会那样工作。

这里要注意的最重要的事情是下拉导航中的html结构 - 所以你必须对subnav的填充方式做一些相对较小的改动。

示例：

<li class=" grid-item"><a href="/">Cat 3</a>
    <ul>
        <li><a href="/">Sub 1</a></li>
        <li><a href="/">Sub 2</a></li>
        <li><a href="/">Sub 3</a></li>
    </ul>
</li>

对于网格我已经使用了列的百分比，因为这就是引导网格的工作原理，所以我认为这是用于响应式网站的？如果不是，您可以提供固定的像素宽度。您必须在下拉导航中提供某种形式的固定测量，或者至少是一个最小宽度选项，因为它绝对定位。

为了实现这一点，您必须在下拉导航可见时初始化网格javascript，否则用于定位每个项目的js将无法正常工作。

$('.dropdown').on('shown.bs.dropdown', function () { ...

有关引导下拉列表的更多信息，请访问： http://getbootstrap.com/javascript/#dropdowns

但是，你应该给你的下拉列表一个ID，然后在javscript中使用它，否则如果你的站点上有一个以上的下拉列表实例，它可能会导致一些问题。

http://codepen.io/partypete25/pen/BKNrBb

有关详细信息，请参阅砌体文档。

希望这有帮助！

多列下拉菜单内联块无法正常工作

1 个答案: