如何让Bootstrap 5居中内容并保持元素水平紧凑？

问题原因 #

你使用的.col类会自动均分父容器（.row）的宽度，当页面宽度增大时，每个列的宽度会被强制拉伸，导致元素之间出现不必要的间距。

解决方案 #

将默认的.col替换为.col-auto，同时给.row添加justify-content-center类，这样列会根据内容自适应宽度，并且整体在页面中居中：

<div class="container text-center">
    <div class="row justify-content-center">
        <div class="col-auto">
            <div>
                image
            </div>
        </div>
        <div class="col-auto">
            Some texty bits
        </div>
        <div class="col-auto">
            <div>
                image
            </div>
        </div>
    </div>
</div>

原理说明 #

• .col-auto：让列的宽度仅包裹自身内容，不会强制均分父容器宽度，确保元素始终紧凑排列。
• justify-content-center：让.row内的所有列在水平方向上居中对齐，实现整体内容居中的效果。

如果需要给元素之间添加固定间隙，可以在.row上额外添加g-*类（比如g-2），用来控制列之间的间距大小，且该间距不会随页面宽度变化而被拉伸。

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