Fatal编程技术网
  • html/
  • Html 引导页面溢出-x隐藏，IOS页面上的一个元素仍然左右滚动

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

html ios css twitter-bootstrap-3

Html 引导页面溢出-x隐藏，IOS页面上的一个元素仍然左右滚动,html,ios,css,twitter-bootstrap-3,Html,Ios,Css,Twitter Bootstrap 3,我希望我的cordova应用程序看起来不像一个web应用程序，而更像一个真正的应用程序，消除了左右滚动 我已经在html和body标记上将overflow-x属性设置为hidden，这适用于除下面的页面之外的所有页面，该页面可以左右滚动，但不应该 我是否误解了网格？我尝试将“overlow-x:hidden”属性应用于封闭的div，而不是其他地方建议的body和html，尝试将该属性应用于单个div，尝试限制div的宽度。我已经尝试将html位置更改为fixed（这会修复左右滚动，但也会停止我需

我希望我的cordova应用程序看起来不像一个web应用程序，而更像一个真正的应用程序，消除了左右滚动

我已经在html和body标记上将overflow-x属性设置为hidden，这适用于除下面的页面之外的所有页面，该页面可以左右滚动，但不应该

我是否误解了网格？我尝试将“overlow-x:hidden”属性应用于封闭的div，而不是其他地方建议的body和html，尝试将该属性应用于单个div，尝试限制div的宽度。我已经尝试将html位置更改为fixed（这会修复左右滚动，但也会停止我需要的向上向下滚动）。你。我的哪些糟糕技能——css、html或引导——让我失望了

    <!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>


我最棒的头衔
html，正文{
溢出-x：隐藏！重要；
}
我最棒的头衔
当您将overflow:hidden设置为元素时，并不意味着它停止滚动。。。它只是隐藏了滚动条。由于移动设备在触摸元素上的任何位置时都会滚动内容，因此它只能保持滚动状态

事实是，即使在桌面设备上，你的网站也可以在X轴上滚动，你只需使用
overflow-X:hidden
on-body标签将其隐藏即可

您的网站在所有设备上都可以x-滚动的原因是您忘记将
class=“container”
添加到
中。我将所有行都放在了.container divs中，但它没有改变行为：。是的，您修复了
共享条，但也编辑了页脚，现在页脚正在破坏网站，将
.container
直接放在下一个
.container
中不是一个好主意。哎哟。很抱歉是的，你说得对，我不是故意要筑巢的。集装箱标签。我放了一个，容器，尽管.navbar固定元素，有趣的是，没有：它在整个页面的宽度上保持坚如磐石。现在在桌面布局上，即使在调整窗口大小时也可以正常工作，我想我需要一个iphone来检查那里的内容，所以现在很抱歉，但无法调查这个问题。感谢您尝试并分享关于x-可滚动页面和填充的信息——现在深入到导航栏css，看看它是否包含一个关于如何定位到宽度的线索。笔中的颜色表明是主体溢出，并且由于某种原因无法调整视口宽度。