如何在Bootstrap Card中将图片移至标题与文本右侧

数据老陈

2026-8-8

解决Bootstrap卡片内图片与标题文本右侧并排的问题

你的问题出在HTML结构错误和图片CSS尺寸设置不当，以下是具体修复方案：

1. 修正HTML结构

你把图片所在的col-md-6放在了row容器外面，导致row仅包裹文本区域，图片自然被挤到下方。需要将图片的col-md-6移入row内部，借助Bootstrap栅格系统实现两栏并排：

<div class="card bg-transparent border-0 text-white mb-3">
    <div class="row g-0">
        <!-- 文本区域：md及以上屏幕占6列 -->
        <div class="col-md-6">
            <div class="card-body">
                <h5 class="card-title">Lorem title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <!-- 图片区域：md及以上屏幕占6列，移入row内部 -->
        <div class="col-md-6">
            <img src="../assets/images/cp/sobre-cid-2.jpg" class="img-fluid rounded-end" alt="cid-2">
        </div>
    </div>
</div>

2. 调整图片CSS尺寸

你给图片设置的width: 90vw会让图片宽度远超col-md-6容器的限制（md屏幕下col-md-6仅占50%屏幕宽度），导致图片撑破布局无法并排。需将宽度改为100%，让图片自适应容器宽度：

.img-fluid.rounded-end {
    height: calc(120px + 10vw);
    width: 100%; /* 替换90vw，自适应col容器宽度 */
    border-radius: 0px 30px 30px 0px; /* 图片在右侧，调整圆角方向 */
    object-fit: cover;
}

.card-title {
    font-family: Martel;
    font-size: 20px;
    padding: 20px;
    text-align: left;
}

.card-text {
    font-family: Martel;
    font-size: 15px;
    padding-left: 20px;
    padding-right: 30px;
    text-align: left;
}