视力检查

Question

下面是我的代码。实际上，我是在标题导航中单击时显示儿童列表（分为2个部分）。

<ul class="nav navbar-nav" data-sly-list.level1="${header.mainNavPages}" >



<div class="col-md-3 col-sm-4">

<ul class="dropdown-list" data-sly-list.level2="${level1.children}">

<li data-sly-test="${level2List.index <= level1.mainNavForkIndexValue}"></li>

-----------

</ul></div>



<div class="col-md-3 col-sm-4">

<li data-sly-test="${level2List.index > level1.mainNavForkIndexValue}"></li>

----

</ul></div>

现在我的要求是，我想在3个部分中显示相同的结果，我想将孩子列表分为3个部分（3个div）。

前2个部分（第一部分为50％，第二部分为50％）

"${level2List.index <= level1.mainNavForkIndexValue}",   ${level2List.index > level1.mainNavForkIndexValue}">

现在3个部分（30,30,40或33,33,34％）

我需要就如何实现这一目标提供明显的条件。

Answer 1

您可以将css用作容器div。尝试使用flex，然后相应地设置样式。

这是同一篇文章 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您可以使用引导网格系统显示三列。您可以查看以下链接： https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp