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

时间:2015-07-28 02:10:46

标签: android html ios css twitter-bootstrap

我一直在尝试使用bootstrap和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>

3 个答案:

答案 0 :(得分:2)

如何在class =“row”中添加col-xs-8和col-xs-4。

    exec("mediainfo --logfile=path /path/of/the/file/video.avi")

答案 1 :(得分:0)

我完全取消了Bootstrap。经过一天的尝试后,我无法让它像我想要的那样工作。

答案 2 :(得分:0)

你使用了bootstap的网格不正确。也许这是你的html结构:

private String downloadUrl(String targetURL) throws IOException {
   ...
   ...

   // Get Response
   connection.connect();
   int http_code = connection.getResponseCode();

   String data = null;
   if (http_code == HttpURLConnection.HTTP_OK) {
      data = this.convertStreamToString(connection.getInputStream());
   }

这是你的css:

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

也许我不明白,这是一个例子Codepen