Android Bootstrap 3在mobile上添加了一个右边距（？）_Android_Html_Ios_Css_Twitter Bootstrap

Android Bootstrap 3在mobile上添加了一个右边距（？）

android html ios css twitter-bootstrap

Android Bootstrap 3在mobile上添加了一个右边距（？）,android,html,ios,css,twitter-bootstrap,Android,Html,Ios,Css,Twitter Bootstrap,我一直在尝试使用bootstrap和CSS设置两个列来删除填充。可悲的是，无论我是在iOS Safari还是Android Chrome上打开页面，都会增加一个右边距。以下是Safari的屏幕截图：我已经试着解决这个问题好几个小时了，但我就是不明白；元素的宽度应占页面的100%。我已经将我的HTML/CSS缩减到最低限度 <!DOCTYPE html> <html> <head> <title>Demo</title

我一直在尝试使用bootstrap和CSS设置两个列来删除填充。可悲的是，无论我是在iOS Safari还是Android Chrome上打开页面，都会增加一个右边距。以下是Safari的屏幕截图：

我已经试着解决这个问题好几个小时了，但我就是不明白；元素的宽度应占页面的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>


演示
#移动页面导航{
填充：0；
}
#移动页面导航>div{
边缘顶部：10px；
左侧填充：0；
右边填充：0；
}
#流动网页导航组{
宽度：100%；
背景色：红色；
高度：100px；
}

在class=“行”中添加col-xs-8和col-xs-4怎么样


--------
--------

我完全取消了引导。经过一天的尝试，我无法使其正常工作。

您使用的bootstap网格不正确。也许这是您的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>

也许我不明白，这里有一个例子

不明白。不起作用，它只会使元素变得更大，而小的余量仍然存在。只是想取消Bootstrap。然后请尝试检查您的外部容器或任何您拥有的，可能是它从那里拿走了利润。

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

        #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;
        }