CSS修改会导致移动/平板电脑滚动条

Question

在过去的几天里，我一直试图伸展某个部分来填充整个容器，我开始工作了。问题是，在手机/平板电脑中会出现一个左右滚动条，它也会混淆粘性标题。

我拉伸的页面：https://roi.pub/about-me/ 我使用的代码：

#primary .container {
padding-right: 0px;
padding-left: 0px;}

.layout-content.boxed #primary {
padding: 0px;
}

@media only screen and (min-width: 768px) {
.layout-content.boxed #primary{padding: 0 !important;}
}

这就是拉伸前页面的样子：https://roi.pub/elementor-2620/我只是想让内容填满白色容器，而不会搞砸。

建议将不胜感激。

Answer 1

你从.container类中删除了填充，这就是引导程序需要的工作方式。

注意 永远不要覆盖bootstrap添加的类，如果你想改变bootstrap的工作方式，拉入sass / less版本并在那里做你的东西。 在.row引导程序中，左右使用-15px以容纳.container左右两侧的填充，因此当你从.container中删除填充时，你会变得一团糟，不要覆盖引导程序。

#primary .container {
    padding-right: 0px;
    padding-left: 0px;
}

.container需要有15px的填充，上面的那些行是你的水平滚动条。当我删除它们时，一切正常。

如果您不打扰覆盖引导程序（您应该）而不是在.container上将填充设置为零，则需要在列本身上将填充设置为零。像这样。

.full-width {
  padding: 0;
} 

您已经拥有该类，该元素也包含来自bootstrap的.col。

一般意见 如果您发现自己需要更改引导程序设置，则应使用sass / less来更改设置，但如果您发现自己需要更改引导程序行为，则必须使用引导程序。

Answer 2

您的问题出现在屏幕的1170px宽度上（这也是您主题的宽度）。 所以有两种解决方案

1. 从最大宽度媒体查询的边距中删除-15px：1170px，同时删除#primary #content #main paddding

   @media（max-width：1170px）{

   #primary #content #main {
       padding-left: 0; 
       padding-right: 0; 
   }
   
   #primary #content {
       margin-left: 0; 
       margin-right: 0; 
   }
   

   }

2. 在容器上应用此代码#primary .container {overflow: hidden;}以隐藏任何覆盖