能否在Bootstrap框架中使用<ul style="columns: X;">？如何实现多列列表

直接用CSS columns 属性替换你当前手动循环分列的逻辑即可，这样更简洁且能规避Bootstrap兼容性问题。以下是修改后的Twig代码：

<h2 class="text-primary text-uppercase my-4 h5">Brands</h2>
<div class="mb-5">
    <ul class="list-unstyled p-0" style="columns: 6; column-gap: 1rem;">
        {% for brand in brands %}
            <li class="mb-2">
                <a class="text-dark d-block" href="{{ brand.url }}" title="{{ brand.name }}">
                    {{ brand.name }}
                </a>
            </li>
        {% endfor %}
    </ul>
</div>

关键调整说明： #

• 移除手动分列逻辑：删掉原有的row、按9个条目拆分col-4和嵌套ul的代码，只用一个ul承载所有品牌项，依靠CSS columns自动完成分栏。
• 适配Bootstrap样式：保留list-unstyled清除默认列表缩进，添加p-0消除内边距；用mb-2给列表项设置垂直间距，替代原来的pb-2。
• columns属性优化：columns:6指定分成6列，column-gap:1rem设置列间距，和Bootstrap的间距体系匹配。

响应式适配建议（可选） #

如果需要在不同屏幕尺寸下调整列数，结合Bootstrap的断点用媒体查询：

@media (max-width: 768px) {
    .brand-list {
        columns: 2;
    }
}
@media (min-width: 769px) and (max-width: 992px) {
    .brand-list {
        columns: 4;
    }
}
@media (min-width: 993px) {
    .brand-list {
        columns: 6;
    }
}

之后将ul的class改为list-unstyled p-0 brand-list，去掉内联样式即可。

内容的提问来源于stack exchange，提问作者NobleUplift