滚动条将页面内容移动到左侧

Question

我第一次在Bootstrap上构建我的网站，我遇到了一个无法找到解决方案的问题。当我添加一些内容并且它的大小足以在浏览器中添加滚动条时，整个页面内容向左移动。

简单来说，如果有滚动条，页面内容会像17px一样向左移动，如果没有，则可以正常工作。我不想在这里添加烫发滚动条，如

overflow-y: scroll;

如果我添加

width: 100vw;

它工作正常，即使使用滚动条，内容仍保持在其位置，但如果有垂直滚动条，则无缘无故地出现水平滚动。

Answer 1

您有几种解决方案：

1. 您可以永久显示您的滚动并相应地设置其样式，使其成为您网页的一部分：

   html {
       overflow-y: scroll;
   } 
   

2. 您可以添加：

   padding-right: 40px;
   

   因为40px就是我所听到的最大滚动尺寸。

3. 创建一个包含所有内容的父div，然后创建一个略小的子级，使其更改父级大小不会改变子级大小。

4. 您可以创建JS函数来检测滚动是否在页面上显示，它会改变边距设置。

5. 您可以使用media queries来解决问题。