Bootstrap 5 Grid 固定与动态宽度列强制同排显示问题求解

问题根因 #

你遇到的布局异常是因为 Bootstrap .row 采用 Flex 布局，默认规则下 Flex 子项的最小宽度为内容自身宽度，超长无间断字符串会撑开动态列宽度，进而导致整体布局换行。

解决方案 #

只需要给动态列追加min-width: 0样式，允许 Flex 子项宽度压缩到小于内容宽度，搭配你已经设置的overflow-wrap: break-word即可实现超长单词自动换行，所有列保持在同一行。
如果要避免固定宽度列被意外压缩，可以给固定列追加flex-shrink: 0样式。

修改后完整代码 #

@import "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css";

<div class="container">
    <div class="row border">
        <div class="border" style="width:30px;flex-shrink:0;">X</div>
        <div class="border" style="width:40px;flex-shrink:0;">XX</div>
        <div class="col border" style="overflow-wrap: break-word;min-width:0;">tooLongForThisRooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooow</div>
    </div>
    <div class="row border">
        <div class="border" style="width:30px">Y</div>
        <div class="border" style="width:40px">YY</div>
        <div class="col border" style="overflow-wrap: break-word;">not too long not too long not too long not too long not too long not too long not too long not too long not too long not too long not too long</div>
    </div>
</div>

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