将<ul> <li>拆分为4列？

Question

我在我的Django应用程序中使用Jinga模板语言和bootstrap 4。我希望在多列而不是一列中显示以下应用程序列表。我怎么能把这个列表分成4列？

<div class = "container">



      <h2>Available Application List</h2>

<ul>

        {% for app in applicationlist %}
        <li><input type="checkbox" name="..." >  {{ app.report_name }}</li>

        {% endfor %}
</ul>

Answer 1

如果您使用的是Bootstrap，请查看col类提供的平均分配列：https://v4-alpha.getbootstrap.com/layout/grid/#equal-width

希望有所帮助！

Answer 2

你应该使用CSS。尝试多列布局：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

其他解决方案包括在父display: flex上使用<ul>，在每个<li>上设置百分比宽度以及float: left，或在每个display: inline-block上使用<li> {1}}。