Bootstrap 3 在移动设备上添加了右边距 (?)答案

【问题标题】：Bootstrap 3 adds a right margin (?) on mobileBootstrap 3 在移动设备上添加了右边距 (?)
【发布时间】：2015-07-28 02:10:46
【问题描述】：

我一直在尝试使用引导程序和 CSS 设置两列来删除填充。可悲的是，无论我在 iOS Safari 还是 Android Chrome 上打开页面，它都会增加一个右边距。这是 Safari 的截图：http://i.imgur.com/Cs7X5oC.jpg

我已经尝试解决这个问题几个小时，但我就是不明白；元素的宽度应占页面的 100%。我已将我的 HTML/CSS 减少到最低限度；

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <style>
            #mobile-page-navigation{
                padding: 0;
            }

            #mobile-page-navigation > div {
                margin-top: 10px;
                padding-left: 0;
                padding-right: 0;
            }

            #mobile-page-navigation div div {
                width: 100%;
                background-color: red;
                height: 100px;
            }
        </style>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    </head>
    <body>

        <div id="mobile-page-navigation" class="col-xs-12">
            <div class="col-xs-8 first-mobile-page-navigation">
                <div></div>
            </div>
            <div class="col-xs-4 second-mobile-page-navigation">
                <div></div>
            </div>

            <div class="col-xs-4 first-mobile-page-navigation">
                <div></div>
            </div>
            <div class="col-xs-8 second-mobile-page-navigation">
                <div></div>
            </div>

        </div>

    </body>
</html>

【问题讨论】：

标签： android html ios css twitter-bootstrap

【解决方案1】：

如何在 class="row" 中添加你的 col-xs-8 和 col-xs-4。

<div id="mobile-page-navigation" class="row">
  <div class="col-xs-8 first-mobile-page-navigation">
    <div></div>
  </div>
  <div class="col-xs-4 second-mobile-page-navigation">
    <div></div>
  </div>
--------
--------
</div>

【讨论】：

不。不起作用，它只是使元素更大，并且小边距仍然存在。只是考虑取消 Bootstrap。
那么请尝试检查您的外部容器或您拥有的任何东西，可能是它从那里占了边距。

【解决方案2】：

我完全放弃了 Bootstrap。经过一天的尝试，我无法让它像我想要的那样工作。

【讨论】：

【解决方案3】：

您使用的引导程序的网格不正确。也许这是你的 html 结构：

<body>
<div class="container">  
    <div id="mobile-page-navigation">
        <div class="row">
           <div class="col-xs-8 first-mobile-page-navigation">
               <div></div>
           </div>
           <div class="col-xs-4 second-mobile-page-navigation">
               <div></div>
           </div>
        </div>
        <div class="row">
           <div class="col-xs-4 first-mobile-page-navigation">
               <div></div>
           </div>
           <div class="col-xs-8 second-mobile-page-navigation">
               <div></div>
           </div>
        </div>
    </div>
</div>
</body>

这是你的css：

        #mobile-page-navigation > div {
            margin-top: 10px;
            padding-left: 0;
            padding-right: 0;
        }

        #mobile-page-navigation div div {
            width: 100%;
            background-color: red;
            height: 100px;
        }

可能我没看懂，这里举个例子Codepen

【讨论】：