滚动条出现在引导构建网页的底部答案

【问题标题】：Scroll bar appearing on at the bottom of bootstrap built webpage滚动条出现在引导构建网页的底部
【发布时间】：2019-05-09 17:11:24
【问题描述】：

我有一个页面，不明白为什么会出现底部导航滚动条。 Auda 网站https://www.audatex.co.in/ 似乎某些元素不在屏幕上，但我不明白是什么！欢迎解决！谢谢

【问题讨论】：

欢迎来到 SO。请分享代码，而不是简单地链接到您的网站。链接消失了，这个问题就会变得毫无意义。临时解决方案，将其添加到 CSS 样式表中的 body 标记 overflow-x: hidden。

标签： html css

【解决方案1】：

你遇到的问题是因为 margin 你给 .row 类

.row {
    margin-left: -15px;
    margin-right: -15px;
}

删除它甚至修复它并解决问题。

【讨论】：

这是 bootstrap 的 css。你能确定覆盖它吗？

【解决方案2】：

SOLERA STATISTICS 部分正在创建水平滚动条。更新您的引导 css 文件。或者使用下面的css：

.container-fluid{
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

【讨论】：

【解决方案3】：

您在此 html 代码中删除类 row

<section class="stats-section" id="solera">
  <div class="container-fluid wow fadeInDown delay-05 animated" style="visibility: visible; animation-name: fadeInDown;">
    <!--main-section-start-->
    <h2> Solera Statistics</h2>
    <div class=""> //Remove class `row` in there
    ...
    </div>
   </div>
</section>

【讨论】：

建议：如果出于任何原因想要保留行类，请将行放在 contianer-fluid div 中。有关解释，请查看link

【解决方案4】：

#solera .row 元素比页面宽。

考虑将以下内容添加到您的 css 中：

#solera .row {
  width: 100%;
}

【讨论】：

【解决方案5】：

设置边距 0

#solera .row{
     margin:0;
    }

【讨论】：

【解决方案6】：

因为您使用的是animate.css，所以出现了滚动。使用溢出-x：隐藏；在体内。

【讨论】：

【解决方案7】：

您的 bootstrap.css 缺少 container-fluid 的样式。使用稳定版本的引导 CSS。目前您正在使用 Bootstrap v3.0.3。使用 Bootstrap (v3.3.7)

<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

2.x .container-fluid 在 Bootstrap 3 中被 .container 取代。*

但是，对于 Bootstrap 3.1

container-fluid 在 Bootstrap 3.1 中再次返回。现在可以使用 container-fluid 来创建全宽布局。

【讨论】：

【解决方案8】：

您的 html 正文将溢出。您需要隐藏 x 轴上的溢出。使用下面的代码它会帮助你

body{

overflow-x:hidden;

}

【讨论】：

【解决方案9】：

实现css类并将其分配给适当的部门：overflow-x:hidden;

【讨论】：

这只是隐藏了问题，并没有解决问题。
您应该更改答案并链接该答案。将类 container 添加到 .row 所在的容器是 imo 的最佳解决方案。