Question

Bootstrap 3购物车使用bootstrap标准标记定义，如

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<body>    
    <div class="container">
        <div id="_info"></div>

        <header class="row">
            <div class="col-xs-12">
    </header>
<nav class="navbar navbar-default">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">L&#252;li navigeerimist</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <li>

      ....

在移动设备中，其内容宽度与移动屏幕宽度相同。

但是，用户可以水平向左拖动内容，以便在左侧显示丑陋的空白区域。

如何解决此问题，以便不允许进行不必要的左拖动？也许页面中的某些元素会导致这种效果？

我尝试删除Chrome开发者工具“元素”标签中的元素，但仍允许水平滚动。

Answer 1

问题是你的页眉和页脚都有一个硬设置宽度。这通常不会成为适当的媒体查询的问题，但在我看来，为了不必担心添加更多的媒体查询，我只会像下面一样更改标题的CSS：

@media only all and (min-width: 481px)
    header, .wrap {
        width: 100%;
        margin: 0 auto;
    }

对于页脚，你有一个facebook工具栏，它有很多硬盘内联宽度。您可以通过将整个元素包装在div中并将width: 100%; overflow: hidden;应用于该div来共同破解它，但我强烈建议您对该插件进行更多研究以使其正常运行或找到更好的插件来提供更好的效果结果

Answer 2

这是我的comp。我只是禁用了标题的设置宽度。

如果内容适合移动屏幕，如何禁用水平点击

2 个答案: