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

时间:2017-11-09 19:58:59

标签: html bootstrap-4

我在我的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>

2 个答案:

答案 0 :(得分:0)

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

希望有所帮助!

答案 1 :(得分:0)

你应该使用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}}。