Question

我目前正在开发一个涉及显示项目的项目，我正在使用bootstrap v4来构建响应式前端。

问题：我遇到了这个涉及卡类使用的问题，每行的第一张卡的高度占据了整个行高（如果有意义的话）。我已经尝试查找此问题的修复程序并尝试在每行之前添加具有类清除修复的div但我仍然认为这是一个明确的修复问题，虽然不清楚如何修复它。我希望每行中的第一张卡与该行上的每张其他卡一致;有点像第二和第三列牌。

提前感谢！

溶液：

display: flex;

<div class="container">
<div class="row">
    <div class="col-4" id="item_card">
        <div class="card text-center">
            <img class="card-img-top" src="./itemimgs/creamy-no-stir.png" id="itemImg">
                <div class="card-block">
                    <p class="card-text">trader joe's peanut butter</p>
                </div>
        </div>
    </div>
    <div class="col-4" id="item_card">
        <div class="card text-center">
            <img class="card-img-top" src="./itemimgs/greatvaluepb.jpeg" id="itemImg">
            <div class="card-block">
                <p class="card-text">kirkland peanut butter</p>
            </div>
        </div>
    </div>
    <div class="col-4" id="item_card">
        <div class="card text-center">
            <img class="card-img-top" src="./itemimgs/smuckers.jpeg" id="itemImg">
            <div class="card-block">
                <p class="card-text">schmuckers peanut butter</p>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-4" id="item_card">
        <div class="card text-center">
            <img class="card-img-top" src="./itemimgs/skippy_pb.jpg" id="itemImg">
            <div class="card-block">
                <p class="card-text">schmuckers peanut butter</p>
            </div>
        </div>
    </div>
    <div class="col-4" id="item_card">
        <div class="card text-center">
            <img class="card-img-top" src="./itemimgs/justins.jpeg" id="itemImg">
            <div class="card-block">
                <p class="card-text">schmuckers peanut butter</p>
            </div>
        </div>
    </div>...

这是一个涉及卡片的明确修复问题吗？

0 个答案: