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

在我正在制作的Web应用程序的主页上，我有按比例缩放为450px的照片。在移动设备中，所有内容都可以完美地显示在屏幕上，但是通过Web应用程序，我可以向右滚动到无内容，而页脚始终停留在底部。我认为这与我的身体和/或内容和页脚类有关。我为照片使用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;，但是那没有用，并且我尝试了调整body和row类的边距和填充，但这没有用。有没有人有一个好的解决方案？

最佳答案

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

您的问题听起来像是应用程序没有真正响应（如果您的其他HTML设置不正确，则meta标签不会使其响应），但是不能确定是否没有查看您拥有的html。

一种建议是将整个代码放在容器类的主体中
或只是图片div：

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

要么

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

这就是我通常用来使某些部位具有响应性的功能（您也可以将其添加到身体中）。

关于html - 移动设备上的Bootstrap 4让我向右滚动到空白屏幕(带页脚)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52917332/