Bootstrap开发：如何将徽章放置于轮播图（carousel）旁？

你的核心问题是没有遵循Bootstrap栅格系统的层级规则——col-*类必须嵌套在row容器内部才能触发栅格布局逻辑，直接放在container下的话，两个区块会默认上下堆叠。另外你给卡片和轮播图设置了固定的width:18rem，也会限制它们的自适应能力，进一步影响并排效果。

修复步骤： #

• 在container内部添加row容器，将两个col-md-6包裹进去
• 可选：移除卡片和轮播图的固定宽度，让它们自适应父容器宽度；若要保留固定宽度，需确保两者总宽度加间距不超出父容器范围

修改后的完整代码： #

<div class="container px-1 py-1">
    <!-- 添加row容器包裹col -->
    <div class="row">
        <div class="col-md-6 bg-primary rounded">
            <div class="card">
                <img src="user_icon.jpg" class="card-img-top" alt="profilepicture">
                <div class="card-body">
                    <h5 class="card-title">Why Bootstrap?</h5>
                    <p class="card-text">Fast. Stylish. Easy. Bootstrap is easy to use, and looks great.</p>
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
        </div>
        <div class="col-md-6 bg-primary border">
            <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="user_icon.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>First slide label</h5>
                            <p>Some representative placeholder content for the first slide.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="..." class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Second slide label</h5>
                            <p>Some representative placeholder content for the second slide.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="..." class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Third slide label</h5>
                            <p>Some representative placeholder content for the third slide.</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
    </div>
</div>

额外说明： #

• 若希望在手机等小屏幕上也保持并排，将col-md-6替换为col-6即可
• 若坚持使用固定宽度，可给row添加flex-nowrap类强制不换行，但可能导致横向滚动，需谨慎使用

内容的提问来源于stack exchange，提问作者Charlie