如何让Bootstrap 5构建不拉伸列的网格并从右向左填充？

核心修改思路 #

要实现你需要的效果，只需对原代码做两处关键调整：

• 用col-auto替代默认的col，让列仅占用自身内容所需宽度，不再拉伸填满父容器
• 给row添加justify-content-end类，让整个网格内容靠右对齐，实现从右向左填充的布局

另外可以给行加上间距类（比如g-3），让列之间的留白更合理，避免内容挤在一起。

修改后的完整代码 #

<div class="row justify-content-end g-3">
    <div class="col-auto">
        <p class="mb-0 fw-bold">xx xx xxxx</p>
        <p class="text-secondary">Employee Range</p>
    </div>
    <div class="col-auto">
        <p class="mb-0 fw-bold">xxxx</p>
        <p class="text-secondary">Rechtsform</p>
    </div>
    <div class="col-auto">
        <p class="mb-0 fw-bold">xxx-xxx.xxx.x&nbsp;xxxx</p>
        <p class="text-secondary">xxx.-xx</p>
    </div>
    <div class="col-auto">
        <p class="mb-0 fw-bold">xx-xxx.x.xxx.xxx-x</p>
        <p class="text-secondary">Handelsregister-Nummer</p>
    </div>
</div>

各修改点说明 #

• col-auto：Bootstrap中这个类会让列根据内部内容自动调整宽度，不会像col那样均分父容器宽度，直接解决列拉伸和多余空间的问题
• justify-content-end：这是Flex布局的对齐类，作用是让row内的列整体靠右排列，实现从右向左填充的视觉效果
• g-3：可选的间距类，控制列之间的水平间距，数值可以根据需求调整（比如g-2、g-4）

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