Question

我目前在尝试设置左侧导航栏的每个子列表时遇到问题，以便在每个子列表正确对齐时如果有超过6列，则问题从第7个列表发生。我使用bootstrap并且每个子列表的大小都是2（所以从第7个开始，当它通过12列大小时，它会向下移动，如预期的那样）

我得到的结果是

预期结果是

每个列表使用的代码片段：

<div class="sub-navigation-section col-md-2">Ul and li inside</div>

尝试执行预期结果的CSS是Float:left;

Answer 1

Bootstrap使用12列网格系统，因此您无法将其平均划分为7列。你可以通过创建一个宽度约为14.285％（100/7）的自己的类和与bootstrap col- *类相同的属性（向左浮动等）来做到这一点......但是请记住你需要满足不同的视口等

Answer 2

如果你不使用javascript，你可以选择使用CSS3的column-gap和column-width，如下例所示：

它像瀑布布局一样漂浮在盒子上。希望这会对你有所帮助。