Bootstrap中3列中的组列表答案

【问题标题】：Group list in 3 columns in BootsrapBootstrap中3列中的组列表
【发布时间】：2021-12-17 00:39:59
【问题描述】：

我有一个 MongoDB 数据库，我想导入 forEach 3 个数组。这是一个配方，我希望看起来像第一列 quantity 旁边的新列 unit 和 ingredients 旁边，每个都是从数据库数组列表中导入的。

这是我的代码：

<div class="row pt-4">
    <div class="col-12">
        <h4>Ingredients</h4>
        <ul class="list-group">
        <% recipe.quantity.forEach(function(quantity, index){ %>
            <li class="list-group-item"><%= quantity %></li>
        <% }) %>

        <% recipe.unit.forEach(function(unit, index){ %>
            <li class="list-group-item"><%= unit %></li>
        <% }) %>

        <% recipe.ingredients.forEach(function(ingredients, index){ %>
            <li class="list-group-item"><%= ingredients %></li>
        <% }) %>
        </ul>
    </div>
</div>

【问题讨论】：

标签： html node.js list bootstrap-4 ejs

【解决方案1】：

试一试：

将行包装在容器中。这很重要，因为行的边距为负数。
将输出分成 3 个列表 - 每列一个列表。
在列表前显示标题。
在移动设备上显示所有列表：使用col-md class 或another one。

<div class="container">
    <div class="row pt-4">
        <div class="col-md">
            <h4>Quantity</h4>
            <ul class="list-group">
                <% recipe.quantity.forEach(function(quantity, index){ %>
                <li class="list-group-item"><%= quantity %></li>
                <% }) %>
            </ul>
        </div>
        <div class="col-md">
            <h4>Unit</h4>
            <ul class="list-group">
                <% recipe.unit.forEach(function(unit, index){ %>
                <li class="list-group-item"><%= unit %></li>
                <% }) %>
            </ul>
        </div>
        <div class="col-md">
            <h4>Ingredients</h4>
            <ul class="list-group">
                <% recipe.ingredients.forEach(function(ingredients, index){ %>
                <li class="list-group-item"><%= ingredients %></li>
                <% }) %>
            </ul>
        </div>
    </div>
</div>

【讨论】：