卡片未在 class 行内形成行

Question

每个渲染的卡片都没有正确对齐，因为它们没有水平对齐，而是垂直对齐（我不希望这样）。

发生这种情况非常奇怪，因为我制作了许多类似的划船器 classes，它们包含完全相同的卡片（但内容不同）并且这些卡片“对齐”得非常好。事实上，在我制作这个之前，我以前制作的行从来没有发生过这种情况，而且我一遍又一遍地检查代码，除了内容之外，它与我之前制作的完全一样这是唯一不同的地方。

    <row>
        {{#each schdData.logs}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <p class="card-text">{{{objst this}}}</p>
                </div>
            </div>
        </div>
        {{/each}}
    </row>

澄清一下，这一行 class 不在另一行 class 内，它仅在 container p-4" class 内，因为我用来放置所有我制作的卡片行数列 classes 并且它们确实有效。

Answer 1

这里。您使用行元素而不是行作为 class。您需要使用 <div class="row">...</div> 而不是 <row>...</row>。请阅读 bootstrap Grid system 以获得更多理解。

您的代码应如下所示：

<div class="row">
    {{#each schdData.logs}}
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <p class="card-text">{{{objst this}}}</p>
            </div>
        </div>
    </div>
    {{/each}}
</div>

卡片未在 class 行内形成行

The cards do not form rows inside the class row

express-handlebars

bootstrap-5

hbs