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

Posted 2023-05-08

【中文标题】根据列表大小调整引导菜单多列的大小

【英文标题】：Resize Bootstrap Menu Multi-Column Based on Size of List

【发布时间】：2017-02-18 04:47:11

【问题描述】：

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

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

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

是基于屏幕的大小。 https://jsfiddle.net/maciej_p/eatv1b4b/18/

基于静态数量的项目“这是我目前正在使用的” http://alijafarian.com/bootstrap-multi-column-dropdown-menu/

我需要一个基于动态列表创建的菜单列表，该列表根据菜单中的项目数量进行扩展或收缩。我可能会根据每个权限编写一个菜单，但我认为这会生成 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>

【问题讨论】：

请添加您尝试过的内容

帖子中的第一个链接，JSFIDDLE 链接是我尝试过的。但是，它仅根据屏幕大小而不是列表大小调整大小。如果列表超过 10 个或更多项目，则应扩展到第二列

我认为你需要 javascript (JQuery)

那条评论对我没有帮助...

请阅读本网站关于如何提问的常见问题解答。我怀疑有人会从头开始为您编写 JS。我们需要您尝试，我们会从那里提供帮助。

【参考方案1】：

我认为你需要使用一些 jQuery。如果我理解正确，您希望列数基于 .dropdown-menu 内的 li 计数。

您需要在 dom 加载后检查您的 li 计数，并在此基础上检查您的员工。

$(document).ready(function() 
  var columnCount = $(".columns li").length;
  if (columnCount <= 10) 
    $(".columns").addClass("one-col");
   else if (columnCount > 10 && columnCount <= 20) 
    $(".columns").addClass("two-col");
   else if (columnCount > 20) 
    $(".columns").addClass("three-col");
  
)

.columns.one-col 
  height: 200px;
  overflow-y: auto;

.columns.two-col 
  -moz-column-count: 2;
  /* Firefox */
  -webkit-column-count: 2;
  /* Safari and Chrome */
  column-count: 2;
  width: 500px;
  height: 170px;

.columns.three-col 
  -moz-column-count: 2;
  /* Firefox */
  -webkit-column-count: 2;
  /* Safari and Chrome */
  column-count: 2;
  width: 500px;
  height: 170px;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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>
    <br>
    <br>
    <span style="color:red">&laquo; click on the edge of frame and move it to the left to see how menu changes into two column</span>
  </div>
</div>

还有JsFiddle链接进行测试。