html - 为什么我的导航栏在 bootstrap 的移动 View 中有边距？

Question

好的，这里是我所有的代码，只是一个带有一些 css 样式的简单导航栏，出于某种原因，每次我将它缩小到移动 View 时，它不会达到屏幕宽度的 100%，并且左右都有边距大约20px

CSS

.navbar .brand {
    width:150px;;
}
 .nav-collapse > ul >li{
    padding-top:50px;
 }
 html, body {
     margin:0px;!important
     padding:0px;!important
     }

.nav .active a { background:#06F!important;
color:white!important;
}



    /* CUSTOMIZE THE NAVBAR
    -------------------------------------------------- */
    .navbar-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      margin-top: 20px;
      margin-bottom: -90px; 
    }
    .navbar-wrapper .navbar {


    }

    /* Remove border and change up box shadow for more contrast */
    .navbar .navbar-inner {
      border: 0;
    }

    /* Downsize the brand/project name a bit */
    .navbar .brand {
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
      width:150px;
    }

    /* Navbar links: increase padding for taller navbar */
    .navbar .nav > li > a {
      padding: 18px 20px;
    }

    /* Offset the responsive button for proper vertical alignment */
    .navbar .btn-navbar {
      margin-top: 10px;
    }



    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }
      .navbar-inner {

        margin: 0px 0px -20px 0;
      }


    }


    @media (max-width: 767px) {

        .navbar {
            width:100%;
            }
        .navbar .navbar-inner {
        width:100%;
        margin-right:0px;
            margin-left:0px;

            }

      .navbar-inner {
        margin: 0px 0px -20px 0;
      }

    }

HTML

 <div class="navbar">
      <div class="navbar-inner btn-block">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">MOBILE</a>
          <div class="nav-collapse collapse text-center">
            <ul class="nav pull-right">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Events</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--container END-->
      </div>
    </div>

脚本

  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <script src="docs/assets/js/jquery.js"></script>
    <script src="docs/assets/js/bootstrap.js"></script>
    <script src="docs/assets/js/bootstrap.min.js"></script>
    <script src="docs/assets/js/holder/holder.js"></script>
    <script src="docs/assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>

Answer 1

Bootstrap CSS 在小屏幕上向正文添加填充:

@media (max-width: 767px)
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

尝试覆盖:

@media (max-width: 767px)
  body {
    padding: 0;
  }
}