如何使用Bootstrap 5增加文本与图片的间距

你可以通过以下几种简单方法调整两者间距：

方法1：利用Bootstrap内置gutter类调整列间距 #

Bootstrap的row组件支持g-*类控制列之间的间距（gutter），数值越大间距越宽，比如g-5：

<div class="row g-5">
    <div class="col-md-6 order-md-1">
        <img src="../Problem_image/<?= $rowDd['image'];?>" width="600">
    </div>
    <div class="col-md-6 order-md-2">
        <h5>name:</h5>
        <p><?= $rowDd["name_surname"];?></p>
        <h5>phone:</h5>
        <p><?= $rowDd["phone_number"];?></p>
    </div>
</div>

方法2：给列添加自定义响应式边距 #

如果需要更灵活的控制，可针对md及以上屏幕给图片列加右侧边距，或给文本列加左侧边距（避免移动端布局错乱）：

<style>
    .book-details{
        background-color:#f5f5f5;
    }
    @media (min-width: 768px) {
        .image-col {
            margin-right: 4rem; /* 自定义间距大小 */
        }
        /* 也可以给文本列加左边距 */
        .text-col {
            margin-left: 4rem;
        }
    }
</style>

然后修改列的类名：

<div class="col-md-6 order-md-1 image-col">
    <img src="../Problem_image/<?= $rowDd['image'];?>" width="600">
</div>
<div class="col-md-6 order-md-2 text-col">
    <!-- 文本内容 -->
</div>

方法3：给图片或文本容器加内边距 #

直接用Bootstrap的内边距类给图片加右侧间距，或给文本容器加左侧间距：

<div class="col-md-6 order-md-1">
    <img src="../Problem_image/<?= $rowDd['image'];?>" width="600" class="pe-5"> <!-- pe-5是右侧内边距类 -->
</div>
<div class="col-md-6 order-md-2">
    <div class="ps-5"> <!-- ps-5是左侧内边距类 -->
        <h5>name:</h5>
        <p><?= $rowDd["name_surname"];?></p>
        <h5>phone:</h5>
        <p><?= $rowDd["phone_number"];?></p>
    </div>
</div>

优先推荐方法1，这是Bootstrap原生适配方案，兼容性和响应性更好；需要个性化间距时再选方法2或3。

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