Bootstrap Carousel-item布局问题：图片与文本无法并排显示

问题分析 #

你的代码中，carousel-item 内的图片和文本容器默认是块级元素，会自动上下排列；同时 Bootstrap 的 Carousel 组件默认会对内部图片应用居中样式，导致图片无法和文本并排展示。

修复方案 #

通过 Bootstrap 的布局工具类调整 carousel-item 内部元素的排列方式，以下两种方案均可实现需求：

方案一：使用 Flex 布局（推荐） #

给 carousel-item 添加 d-flex align-items-center 类，让内部元素横向并排并垂直居中，同时保留原有间距样式：

<div class="carousel-item active d-flex align-items-center">
    <img class="img-fluid m-3" width="200px" height="200px" src="img/header1.png" aria-hidden="true">
    <div class="container">
        <div class="carousel-caption text-start">
            <h1>Nous sommes à leurs côtés</h1>
            <p class="text-start">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur voluptate fugiat.</p>
            <p><a class="btn btn-lg btn-success" href="#">Faites un don</a></p>
        </div>
    </div>
</div>

方案二：使用网格系统 #

利用 Bootstrap 栅格系统，将图片和文本分别放入不同列容器中，精确控制宽度占比：

<div class="carousel-item active">
    <div class="row align-items-center">
        <div class="col-md-4">
            <img class="img-fluid m-3" width="200px" height="200px" src="img/header1.png" aria-hidden="true">
        </div>
        <div class="col-md-8">
            <div class="carousel-caption text-start">
                <h1>Nous sommes à leurs côtés</h1>
                <p class="text-start">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur voluptate fugiat.</p>
                <p><a class="btn btn-lg btn-success" href="#">Faites un don</a></p>
            </div>
        </div>
    </div>
</div>

额外优化建议 #

• 可移除图片上的固定 width 和 height 属性，仅保留 img-fluid 类，让图片自适应容器大小
• 添加响应式类（如 d-md-flex），确保移动端设备上元素自动切换为垂直布局，提升适配性

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