Bootstrap 4 的水平列表在 4 个项目后转到下一行
ale*_*025 3 html css flask bootstrap-4
嗨，我想让那个水平列表在 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。
提前致谢。
您可以使用 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 示例更新
蟒蛇代码：
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>
输出：
