我一直在尝试使用引导程序和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>

最佳答案

如何在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>

10-07 14:31
查看更多