Jquery 根据列表大小调整引导菜单多列的大小

我有一个引导菜单列表，根据用户登录的情况动态更新

在最小的列表中，只有15项。在最大的列表中，将有26个项目。列表项将根据权限动态添加到视图中

目前的引导解决方案是基于屏幕大小和列表中静态项目数的多列布局

取决于屏幕的大小。

基于项目的静态数量“这是我当前使用的”

我需要一个菜单列表，它是基于动态列表创建的，动态列表根据菜单中的项目数展开或收缩。我可能会根据每个权限编写一个菜单，但我认为这将生成3倍的代码量

我想在下面列出一个完整的项目列表，但我根据列表计数添加了列。我不知道列表中的项目数量，直到加载之后。因此，当列表超过20项时，我无法打开和关闭列

请帮忙

<div class="row">
  <div class="col-xs-12">
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">click this<b class="caret"></b></a>
          <ul class="dropdown-menu columns">
            <li><a href="#"><strong>Górny Śląsk</strong></a></li>
            <li><a href="#">powiat będziński</a></li>
            <li><a href="#">powiat bielski</a></li>
            <li><a href="#">powiat bieruńsko-lędziński</a></li>
            <li><a href="#">powiat cieszyński</a></li>
            <li><a href="#">powiat częstochowski</a></li>
            <li><a href="#">powiat gliwicki</a></li>
            <li><a href="#">powiat kłobucki</a></li>
            <li><a href="#">powiat lubliniecki</a></li>
            <li><a href="#">powiat mikołowski</a></li>
            <li><a href="#">powiat myszkowski</a></li>
          </ul>
        </li>

      </ul>
    </nav>
  </div>
</div>

我认为您需要使用一些jQuery。如果我理解正确，您希望列计数基于

li

count in

。下拉菜单

在dom加载后，您需要检查

li

计数，并在此基础上检查您的员工

$（文档）.ready（函数（）{
var columnCount=$（“.columns li”）.length；
如果（列数10和列数20）{
$（“.columns”）.addClass（“三列”）；
}
})

.columns.one-col{
高度：200px；
溢出y：自动；
}
.columns.two-col{
-moz列数：2；
/*火狐*/
-webkit列数：2；
/*狩猎与铬*/
列数：2；
宽度：500px；
高度：170px；
}
.三列{
-moz列数：2；
/*火狐*/
-webkit列数：2；
/*狩猎与铬*/
列数：2；
宽度：500px；
高度：170px；
}

&拉阔；单击框架的边缘并将其向左移动，以查看菜单如何变为两列

请添加您尝试的内容帖子中的第一个链接，JSFIDLE链接就是我尝试过的。不过，它只根据屏幕大小而不是列表大小调整大小。如果一个列表超过10个或更多项，它应该扩展到第二列。我想你需要JavaScript（JQuery），评论对我没有帮助……请阅读本网站的常见问题解答。我怀疑有人会为你从头开始写JS。我们需要你去尝试，我们会在那里提供帮助。