html - 移动设备上的 Bootstrap 4 让我可以向右滚动到空白屏幕(带页脚)

Question

在我正在制作的网络应用程序的主页上，我有缩放到 450px 的照片。在移动设备上，一切都完美地显示在屏幕上，但网络应用程序让我可以向右滚动到什么都没有，页脚贴在底部。我认为这与我的 body 和/或内容和页脚类有关。我为我的照片使用了一个 div class="content"，在桌面版中它们位于三行中间。我的代码中已经有这个:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">

我的类(class)是这样的:

body {
    margin: 0px;
    overflow-x: hidden;
}

.content {
    max-width: 450px;
    margin: auto;
}

.footer {
    height:50px;
    width: 100%;
    background-color: white;
    background-image: none;
    background-repeat: repeat;
    background-position: 0% 0%;
    border-top: .5px solid #F5F5F5;
    position: fixed;
    bottom: 0pt;
    left: 0pt;
    -webkit-box-shadow: 0px -1.5px 1.5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px -1.5px 1.5px rgba(50, 50, 50, 0.75);
    box-shadow: 0px -1.5px 1.5px rgba(50, 50, 50, 0.75);
}

你可以看到我尝试了 overflow-x: hidden; 但那没有用，我已经尝试调整 body 和 row 类的边距和填充，但那没有工作。谁有好的解决办法？

Answer 1

没有代表将其设置为评论，因此我将其添加为可能的答案。

你的问题听起来像是应用程序没有真正响应(如果你的其他 HTML 设置不正确，meta 标记就不会这样)，但如果不查看你的 html 就无法确定。

一个建议是将整个代码放在容器类的正文中 或者只是图片 div :

<div class="container">
   <!-- Content here -->
</div>

或

<div class="container-fluid">
   <!-- Content here -->
</div>

这是我通常用来使某些部分响应的方法(您也将其添加到正文中)。