移动设备上的 Boostrap 4 让我向右滚动到空白白屏(带页脚)

Question

在我正在制作的网络应用程序的主页上，我有缩放到450px的照片。在移动设备上，一切都非常适合屏幕，但网络应用程序允许我向右滚动到任何内容，页脚粘在底部。我认为这与我的身体和/或内容和页脚类有关。我为我的照片使用div class="content"，在桌面版本上将它们居中三行。我的代码中已经有这个了：

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

我的课程看起来像这样：

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;但没有奏效，并且我尝试调整正文和行类的边距和填充，但这不起作用。有人有好的解决方案吗？

Answer 1

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

您的问题听起来像是应用程序没有真正响应(如果您的其他 HTML 设置不正确，元标记不会使其响应迅速(，但如果不查看您拥有的 html，就无法确定。

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

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

或

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

这是我通常用于使某些部分响应的内容(您也可以将其添加到正文中(。