Bootstrap 4的水平列表在4个项目后转到下一行答案

【问题标题】：Bootstrap 4's Horizontal list go to the next line after 4 itemsBootstrap 4的水平列表在4个项目后转到下一行
【发布时间】：2019-08-15 05:59:51
【问题描述】：

嗨，我想让那个水平列表在 4 个项目之后转到下一行。这是生成列表的代码：

<div class="list-group list-group-flush list-group-horizontal-xl">
    {% for subject, color in subjects.items() %}
    <div class="list-group-item list-dark-flush" style="align-items: center; display: flex"><div class="picker" data-initialColor="{{color if not color == 'none' else '#03A9F4'}}"></div> <span>{{subject}}</span></div>
    {% endfor %}
</div>

我正在使用 Bootstrap 4 和 Flask。

提前致谢。

【问题讨论】：

标签： html css flask bootstrap-4

【解决方案1】：

你可以使用display: grid;

.list-group {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
}

.list-group-item {
  background: #F7F7F7;
  padding: 1em;
  text-align: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

使用 Flask 示例更新

Python 代码：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/list', methods=['GET', 'POST'])
def show_list():
    subjects = {
        "subject 1":"red",
        "subject 2":"blue",
        "subject 3":"yellow",
        "subject 4":"green",
        "subject 5":"orange",
        "subject 6":"teal",
        "subject 7":"purple",
        "subject 8":"skyblue",
        "subject 9":"silver",
        "subject 10":"gold",        
        "subject 11":"violet",        
        }
    return render_template("list.html", subjects=subjects)

list.html:

<html>
<head>
  <title>Form Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style media="screen">
  .custom-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
  }

  .custom-list-item>span {
    vertical-align: top;
  }

  .round_icon{
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 20px;
    display: inline-block;
  }
  </style>
</head>
<body>
  <div class="container">
    <h3>Custom inline list</h3>
    <ul class="list-inline custom-list">
      {% for subject, color in subjects.items() %}
      <li class="list-inline-item custom-list-item">
        <div class="round_icon" style="background:{{color if not color == 'none' else '#03A9F4'}}"></div>
        <span>{{subject}}</span>
      </li>
      {% endfor %}
    </ul>
  </div>
</body>
</html>

输出：

【讨论】：