在移动设备上检查时，没有一个 div 使用 100% 的最大宽度

Question

我正在处理一个项目，并且创建了三个页面，但是当我尝试将它们用于移动设备时，我发现没有一个 div class like.container-fuild、row 或 col-12 使用 100% 宽度。 实际上，它使用了 100% 的宽度，但对于 @320，它只使用了 70-80% 的屏幕。

<div class="container-fluid no-padding">
<div class="row no-gutters">
    <div class="col-lg-12 col-12">
        <div class="header-banner">
            <div class="row pt-2 pb-3 mx-auto no-gutters">
                <div class="col-lg-4 col-12 mx-auto">
                    <div class="header-img-container">
                        <img class="" src="img/grocery.png"> 
                    </div>
                </div>
                <div class="col-lg-6 col-12 mx-auto">
                    <div class="header-banner-container pt-5">
                    </div>
                 </div>
           </div>
        </div>
           </div>
        </div>

这是我分享的部分代码。 我正在使用引导程序 4 并尝试使用 map 的代码

@media only screen 
 and (min-device-width: 320px) 
 and (max-device-width: 480px)
 and (-webkit-min-device-pixel-ratio: 2) {

我确信媒体与我的问题没有任何联系，但我有责任更新你..

线索将不胜感激。

Output 显示在共享图像中

Answer 1

对我来说，这个问题显然是由不是 100% 宽度的图像引起的。

将 CSS class img-fluid添加到您的图像中，容器也将处于 100% 状态。

文件

Bootstrap 中的图像使用.img-fluid. 最大宽度：100%； 和高度：自动； 应用于图像，使其与父元素一起缩放。