【问题标题】: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 的最佳解决方案。
              猜你喜欢
              • 2014-10-01
              • 2018-03-23
              • 1970-01-01
              • 2015-11-23
              • 2012-10-22
              • 2014-12-12
              • 2021-09-01
              • 2019-02-27
              • 1970-01-01
              相关资源
              最近更新 更多