Bootstrap布局缩放异常求助：后端开发者遇大屏适配故障

问题根源 #

你的布局缩放错乱核心原因是硬编码固定宽高+不合理的自定义样式破坏了Bootstrap响应式机制：

• 直接给列和图片写死width:696px;height:424px，完全忽略了Bootstrap的网格自适应逻辑
• transform: translate(-10%,10%)是基于元素自身尺寸的偏移，页面缩放时偏移比例会跟着乱
• 列宽度分配（col-sm-1+6+3）合计仅10，且自定义width覆盖了col类的自适应宽度

修复后的完整代码 #

<section class="local-services" @if (isset($meta['eye']) && $meta['eye'] == 'off') style="display:none; " @endif >
    <div class="container somesection" style="margin-bottom: 30px;">
        <div class="row">
            <div class="col-md-12">
                @if($meta['heading'])
                    <div class="heading-panel text-center">
                        <h1><span class="heading-color" style="font-weight: 400;">{{ ($meta['heading'])??'' }} </span> </h1>
                        <br>
                        <span>{{ ($meta['sub_heading'])??'' }}</span>
                    </div>
                @else
                    <div class="text-center">
                        <span>{{ ($meta['sub_heading'])??'' }}</span>
                    </div>
                @endif
            </div>
        </div>

        <div class="row align-items-center">
            <!-- 左侧留白 -->
            <div class="col-sm-1"></div>
            
            <!-- 图片容器 -->
            <div class="col-sm-6 position-relative" style="z-index: 9;">
                <img src="{{url(($meta['image'])??'#')}}" class="img-fluid rounded" style="object-fit: cover; min-height: 424px;">
            </div>
            
            <!-- 文本块容器 -->
            <div class="col-sm-4 ms-n5 mt-4">
                <div class="border border-black p-5" style="min-height: 424px;">
                    {!! ($meta['description']) !!}
                    <div class="row mt-4">
                        <div class="col-md-12 text-center">
                            <span class="right_text_read_more">Read More...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

关键修改说明 #

• 移除固定宽高：用img-fluid让图片自适应容器宽度，min-height:424px保留最小高度避免内容塌陷
• 替换transform偏移：用Bootstrap的间距类ms-n5（负左间距）和mt-4（上间距）实现文本块覆盖图片的效果，缩放时间距会自动适配
• 修正网格结构：给顶部标题区域添加row容器（原代码col-md-12直接放在container下不符合Bootstrap规范），用align-items-center让图片和文本块垂直居中对齐
• 调整列宽度：把文本块的col-sm-3改成col-sm-4，让整体列数（1+6+4=11）更合理，避免留白过多
• 规范嵌套结构：文本块内的col-md-12包裹在row里，符合Bootstrap的row-col嵌套规则
• 层级控制：给图片容器加position-relative和z-index:9，确保图片始终在文本块下方

这样修改后，不管页面怎么缩放，图片和文本块都会始终保持在同一行，同时保留你想要的文本块覆盖图片的视觉效果。

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