css - 我的网站仅在移动设备上向右滚动，但只有空白区域

Question

我使用 HTML5、CSS3、Bootstrap 4 和 SCSS 以及一些 JavaScript 和 JQuery 设计了自己的网站。该网站在桌面上看起来不错，但在移动设备上右侧有多余的空白区域，尽管我在所有设备尺寸上都将溢出设置为隐藏。

我已经使用开发人员工具检查了所有元素，并没有发现这种行为的原因，但我觉得这与轮​​播有关，因为它也发生在我只在页面上构建的另一个网站上轮播。

这可以在 https://www.mediumcarlie.co.uk 看到

我已经使用开发人员工具来尝试检查问题，我用谷歌搜索了所有内容，我已经将几乎所有我能够设置的元素的最大宽度设置为 100%，我已经使用媒体查询和 Bootstrap 变量来调整轮播元素的大小。

 <a href="#myCarousel" data-slide="prev" class="carousel-control-prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
 <a href="#myCarousel" data-slide="next" class="carousel-control-next">
                <span class="carousel-control-next-icon"></span>

我预计较小的设备上不会有额外的空白区域。目前手机屏幕右侧只有索引页有空白

Answer 1

Bootstrap 中类为“row”的 div 应该用类为“container”的 div 包裹。在你的情况下，你在 id = "home-heading"的部分有问题。使用如下包装

<section id="home-heading" class="py-5">
    <div class="dark-overlay">
        <div class="container">
            <div class="row">...</div>
        </div>
    </div>
</section>