Bootstrap 中的 3 列组列表

Question

我有一个 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>

Answer 1

举个例子：

在容器中换行。这很重要，因为行有负边距。
将输出分成 3 个列表 - 每列一个列表。
在他们的列表前显示 headers。
在移动设备上显示所有列表：使用 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>

Bootstrap 中的 3 列组列表

Group list in 3 columns in Bootsrap

html

list

ejs

node.js

bootstrap-4