Bootstrap Grid系统col布局异常：两列无法并排显示求助

你的问题核心在于给卡片设置了固定宽度style="width: 20rem;"，Bootstrap的col类是基于容器宽度自适应分配空间的，当卡片的固定宽度超过了col所能分配的可用空间时，第二个列就会被挤到下方换行。

解决方法一：移除卡片固定宽度，让卡片自适应列宽 #

去掉卡片的width: 20rem样式，或添加w-100类让卡片占满列的宽度，同时通过col-*系列类指定列在不同屏幕尺寸下的宽度，确保响应式布局：

<div class="container">
    <div class="row">
        <!--Product: banana split-->
        <div class="col-md-6">
            <div class="card w-100">
                <img class="card-img-top" src="img/banana-split.png" alt="Banana Split Image">
                <div class="card-body">
                    <h4 class="card-title">Banana Split</h4>
                    <p class="card-text">Price: 5$</p>
                    <a href="#" data-name="banana-split" data-price="5" class="add-to-cart btn btn-primary"><i class="fas fa-shopping-cart"></i> Add to Cart</a>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card w-100">
                <img class="card-img-top" src="img/bengala-doce.png" alt="Bengala Doce Image">
                <div class="card-body">
                    <h4 class="card-title">Doce Natalino</h4>
                    <p class="card-text">Price: 2$</p>
                    <a href="#" data-name="doce-natalino" data-price="3" class="add-to-cart btn btn-primary"> <i class="fas fa-shopping-cart"></i> Add to Cart</a>
                </div>
            </div>
        </div>
    </div>
</div>

说明：

• col-md-6表示在中等屏幕（≥768px）及以上，每个列占12栅格系统中的6份，即各占50%宽度，实现并排；小屏幕下自动堆叠。
• card-body是Bootstrap 4及以上版本的标准类，替代旧版的card-block。
• 同时修正了第二个链接中的语法错误：data price="3"改为data-price="3"。

解决方法二：使用col-auto让列自适应内容宽度 #

如果需要保留卡片的固定宽度，可将col替换为col-auto，让列根据卡片的实际宽度自适应分配空间，只要两个卡片的总宽度（含列的内边距）不超过容器宽度，就能并排显示：

<div class="container">
    <div class="row">
        <!--Product: banana split-->
        <div class="col-auto">
            <div class="card" style="width: 20rem;">
                <img class="card-img-top" src="img/banana-split.png" alt="Banana Split Image">
                <div class="card-body">
                    <h4 class="card-title">Banana Split</h4>
                    <p class="card-text">Price: 5$</p>
                    <a href="#" data-name="banana-split" data-price="5" class="add-to-cart btn btn-primary"><i class="fas fa-shopping-cart"></i> Add to Cart</a>
                </div>
            </div>
        </div>

        <div class="col-auto">
            <div class="card" style="width: 20rem;">
                <img class="card-img-top" src="img/bengala-doce.png" alt="Bengala Doce Image">
                <div class="card-body">
                    <h4 class="card-title">Doce Natalino</h4>
                    <p class="card-text">Price: 2$</p>
                    <a href="#" data-name="doce-natalino" data-price="3" class="add-to-cart btn btn-primary"> <i class="fas fa-shopping-cart"></i> Add to Cart</a>
                </div>
            </div>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Isaque Duarte Muniz