Проверка состояния прицела

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 деления).

Ранее 2 раздела (50% в первых разделах и еще 50% во 2-м разделе)

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

Теперь 3 раздела (30,30,40 или 33, 33,34%)

Мне нужно предложение о том, как этого добиться.

Answer 1

Вы можете использовать систему сетки начальной загрузки для отображения трех столбцов. Вы можете взглянуть на ссылку ниже: https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp

Answer 2

Вы можете использовать css для контейнера div.Попробуйте использовать flex, а затем стиль соответственно.

Вот статья о том же https://css -tricks.com / snippets / css / a-guide-to-flexbox /