我使用 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>
我预计较小的设备上不会有额外的空白区域。目前手机屏幕右侧只有索引页有空白
最佳答案
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>
关于css - 我的网站仅在移动设备上向右滚动,但只有空白区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57732906/