网页宽度超出设备宽度，求助排查introduction模块代码问题

问题根源 #

1. Bootstrap网格布局被破坏：.intro-text的margin-left:3vw和图片的margin-left:7vw是直接诱因。Bootstrap的row和col通过负margin+内padding实现自适应布局，额外的margin会让元素总宽度超出父容器，触发横向滚动条。
2. 图片尺寸设置不合理：媒体查询中仅设置height:70%未同步控制宽度，导致图片宽高比失衡，进一步加剧布局溢出。

修复方案 #

修改CSS代码如下：

.introduction {
    position: relative;
    background: grey;
    /* 截断内部溢出元素，避免横向滚动 */
    overflow: hidden;
}

.intro-text {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 2.5vw;
    color: white;
    /* 用padding替代margin，不破坏网格宽度计算 */
    padding-left: 3vw;
}

.col img {
    margin-top: 1.5vw;
    max-width: 100%;
    height: auto;
    /* 用padding替代margin，配合box-sizing确保宽度不溢出 */
    padding-left: 7vw;
    box-sizing: border-box;
}

/* 修正小屏幕下的图片样式 */
@media screen and (max-width: 1150px) {
    .col img {
        /* 用max-width控制尺寸，保持宽高比 */
        max-width: 70%;
        height: auto;
        padding-left: 0;
        /* 居中图片，优化视觉效果 */
        margin: 1.5vw auto 0;
        display: block;
    }
}

.gap {
    height: 100px;
}

关键修复点说明 #

• 替换margin-left为padding-left：让内边距被包含在col的宽度计算中，不会超出容器范围。
• 添加overflow:hidden到.introduction：即使存在微小溢出，也会被容器截断，避免出现横向滚动条。
• 媒体查询中改用max-width控制图片尺寸：保证图片宽高比正常，同时适配小屏幕布局。
• 图片添加box-sizing:border-box：确保padding不会增加元素总宽度，维持布局稳定性。

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