Bootstrap 5移动端col-xs列布局异常：图片被挤至新行

问题原因 #

Bootstrap 5已移除col-xs-*类名，xs（<576px）是默认最小断点，对应列类直接用col-*即可。你使用的col-xs-7和col-xs-5在Bootstrap 5中不生效，浏览器无法识别布局规则，导致左侧元素默认占满整行，将右侧列挤至新行。

修正后的代码 #

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- Body -->
<div class="container">
    <div class="row">
        <div class="col-7">
            <h1 class="text-justify">Name</h1>
            <p class="text-justify">Company</p>
            <p class="text-justify">Role</p>
        </div>
        <div class="col-5 d-flex justify-content-end align-items-center">
            <img class="img-fluid" src="https://via.placeholder.com/200.png">
        </div>
    </div>
</div>

额外优化说明 #

• 替换col-xs-*为col-*后，移动端将按7:5比例正常排列两列
• 右侧列添加d-flex justify-content-end align-items-center，可让图片在列内靠右且垂直居中，适配头部布局视觉需求
• 移除w-25，保留img-fluid让图片自适应列宽，避免不必要的尺寸限制

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