Bootstrap页面溢出-x隐藏，IOS页面上的一个元素仍然左右滚动

我希望我的cordova应用程序看起来不像Web应用程序，更像是一个真正的应用程序，通过消除左侧和右侧滚动。Bootstrap页面溢出-x隐藏，IOS页面上的一个元素仍然左右滚动

我已经将overflow-x属性设置为隐藏在html和body标签上，并且适用于除了下面的页面外的所有页面，左右滚动但不应该这样做。

我误解了网格吗？我尝试将“overlow-x：hidden”属性应用于封闭div，而不是其他地方所建议的body和html，尝试将属性应用于各个div，试图限制div的宽度。我已经尝试将html位置更改为固定（修复了左右滚动，但也停止了我需要的）。你can view the page below on an iOS device to see the behaviour here。我这些糟糕的技能组合中的哪一个（css，html或bootstrap）让我失望？

<!DOCTYPE html> 
<html lang="en" style="position: relative; min-height: 100%;"> 
    <head> 
     <meta charset="utf-8" /> 
     <title> 
      My Awesome Title 
     </title> 
     <meta name="generator" content="BBEdit 11.0" /> 

     <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/entypo.min.css"> 
     <script type="text/javascript" src="scripts/jquery-2.0.3.min.js"> 
     </script> 
     <script type="text/javascript" src="scripts/bootstrap.min.js"> 
     </script> 
     <script type="text/javascript" src="scripts/bootbox.min.js"> 
     </script> 
     <style> 
      html, body { 
      overflow-x: hidden !important; 
      } 
     </style> 
     <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' /> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-6 col-md-offset-3" style="background-color:#F8F8F8;"> 
        <h2 class="text-center"> 
         My Awesome Title 
        </h2> 
        <br /> 
        <div id="hexpix" class="center-block"> 
         <br /><br /> 
         <div id="hexpixdiv"> 
         </div> 
        </div> 
<!-- Alert Space --> 
        <div id="AlertSpace" class="center-block" style="text-align:center; width:75%"> 
        </div> 
        <br /> 
<!-- Hex Content Space for text --> 
        <div id="hexindex" class="text-center"> 
        </div> 
<!-- hexindex close --> 
        <div id="hexcontent" class="text-center"> 
        <!-- 
    <p> 
          Blah blah this text should NOT scroll left and right because overflow-x is set to hidden but it slides back and forth like a hotplate on butter. Why, people, Why? 
          <p> 
--> 

        </div> 
<!-- hexcontent close --> 
        <div id='HelpButton'> 
        </div> 
       </div> 
<!-- Column class close--> 
      </div> 
<!-- Row class close--> 
      <br /> 
     </div> 
<!--Container close--> 
     <div id="sharestrip" style="position: absolute; bottom:40px; width:100%; height:10px;"> 
      <div class="row"> 
       <div class="col-xs-2 text-center"> 
        <a href="javascript:void(0)" class="Reddit"> 
         <span> 
         </span> 
        </a> 
       </div> 
       <div class="col-xs-2 text-center"> 
        <a href="javascript:void(0)" class="SMS"> 
         <span class="icon-export"> 
         </span> 
       </div> 
       <div class="col-xs-2 text-center"> 
        <a href="javascript:void(0)" class="Email"> 
         <span class="icon-gmail"> 
         </span> 
        </a> 
       </div> 
       <div class="col-xs-2 text-center"> 
        <a href="javascript:void(0)" class="Twitter"> 
         <span class="icon-twitter"> 
         </span> 
        </a> 
       </div> 
       <div class="col-xs-2 text-center"> 
        <a href="javascript:void(0)" class="Facebook"> 
         <span class="icon-facebook"> 
         </span> 
        </a> 
       </div> 
       <div class="col-xs-2 text-center"> 
        <a href="javascript:void(0)" class="tumblr"> 
         <span> 
         </span> 
        </a> 
       </div> 
      </div> 
<!-- Row --> 
     </div> 
<!-- Sharestrip --> 
     <div id="footer" style="position: absolute; 
    bottom: 0; 
    width: 100%; height: 20px;"> 
<!-- See hex.css for custom css on this --> 
      <div class="col-xs-12 navbar-inverse navbar-fixed-bottom"> 
       <div class="container"> 
        <div class="row"> 
         <div class="col-xs-3 text-center"> 
          <a href="javascript:void(0)"> 
           <span class="nav-link"> 
           </span> 
          </a> 
         </div> 
         <div class="col-xs-2 text-center"> 
          <a href="javascript:void(0)" 
          <span class="nav-link"> 
           1 
          </span> 
          </a> 
         </div> 
         <div class="col-xs-2 text-center"> 
          <a href="javascript:void(0)"> 
           <span class="nav-link"> 
            2 
           </span> 
          </a> 
         </div> 
         <div class="col-xs-2 text-center"> 
          <a href="javascript:void(0)"> 
           <span class="nav-link"> 
            3 
           </span> 
          </a> 
         </div> 
         <div class="col-xs-3 text-center"> 
          <a href="javascript:void(0)"> 
           <span class="nav-link"> 
           </span> 
          </a> 
         </div> 
        </div> 
<!-- End Row --> 
       </div> 
<!-- End Container --> 
      </div> 
<!-- End Navbar --> 
     </div> 
<!-- End Footer --> 
    </body> 
</html>

来源

2016-04-16 brianfit

当你设置overflow：hidden为元素时，它并不意味着它停止滚动......它只是隐藏滚动条。由于移动设备在触摸元素上的任何位置时滚动内容，因此它只是可滚动的。

事实是 - 即使在桌面设备上，您的网站也可以在X轴上滚动，您只需在身体标记上使用overflow-x: hidden即可隐藏它。

之所以你的网站是X-滚动的所有设备上的是你忘了class="container"添加到<div id="sharestrip"...和行内有100%+15px(left margin)+15px(right margin)比窗口宽度更大。

这种行为减少了.container它的padding-left: 15px and padding-right: 15px，所以只需要记住将class =“container”添加到行的父级。

来源

2016-04-16 15:21:08

我把所有的行放在.container div中，但是它没有改变行为：[这里修改过的html]（http://www.brian-fitzgerald.net/i-ching/i/doodle2.html）。 – brianfit

是的，你修改了'sharestrip'，但是也修改了页脚，现在页脚打破了网站，把'.container'直接放在下一个'.container'中并不是一个好主意。 –

哎呦。抱歉。是的，你说得对，我并不是想要嵌套.container标签。我把[CodePen放在这里与我想要的布局一起]（https://codepen.io/brianfit/pen/MyGEXy/），容器仍然[在ios设备上左右滑动]（https：// s。 codepen.io/brianfit/debug/MyGEXy），但有趣的是，.navbar-fixed元素并没有：它在整个页面宽度上保持稳定。 – brianfit

Bootstrap页面溢出-x隐藏，IOS页面上的一个元素仍然左右滚动

回答

相关问题