如何使我的框水平对齐？

Question

这最终只是一个盒子。但是由于它具有“for”循环，因此它应该有3个水平对齐的框。

<div class="album py-5 bg-light">

    <div class="container">

        {% for hobby in hobbies.all %}

        <div class="row">

            <div class="col-md-4">

                <div class="card mb-4 shadow-sm">

                    <img class="card-img-top" src="{{ hobby.image.url }}"/>

                    <div class="card-body">

                        <p class="card-text">{{ hobby.summary }}</p>

                    </div>

                </div>

            </div>

        </div>

        {% endfor %}

    </div>

</div>

我一直有这个：

我该怎么办？

Answer 1

在这里，您可以使用解决方案<div class="album py-5 bg-light">&nbsp; <div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; {% for hobby in hobbies.all %}&nbsp; &nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card mb-4 shadow-sm">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img class="card-img-top" src="{{ hobby.image.url }}" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="card-text">{{ hobby.summary }}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; {% endfor %}&nbsp; </div></div>你应该在圈子之外。class="row"class="row"以表格格式创建行，这意味着循环中的每个项目将创建一行，然后在其中创建一列，即您在新行中看到每张卡片。要水平获取卡片，所有卡片都应放在一行内。