在移动设备上检查时，div均未使用最大宽度为100％

Question

我正在一个项目上，我已经创建了三个页面，但是当我尝试将它们映射到移动设备时，我没有接到.div，.container-fuild，row或col-12这样的div类。正在使用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>

这是我共享的代码部分。我正在使用bootstrap 4，并尝试映射代码

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

我确信媒体与我的问题没有联系，但我有责任更新您。

铅将不胜感激。

输出显示在共享图像中

Answer 1

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

将CSS类img-fluid添加到图像中，容器也将100％打开。

documentation

Bootstrap中的图像响应速度为.img-fluid.最大宽度：100％；和高度：自动；应用于图像，以便与父元素缩放。