为什么我的导航栏在引导程序的移动视图中两侧有边距？

Question

好的，我的所有代码都只是一个简单的导航栏，带有一些 css 样式，由于某种原因，每次我将其缩小到移动视图时，它都不会达到 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 在小屏幕上为 body 添加填充：

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

尝试覆盖：

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

Answer 2

我无法用脚本测试你的代码，但你可以试试这个；

.navbar-wrapper, .navbar, .navbar-inner, .container{
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
}

在 CSS 的顶部。如果您将其放在顶部，则其他 css（创建边距和填充）将在此之后被否决。

如果它不起作用，请尝试将其放在底部，以查看它是否以任何方式起作用。如果它出现在您的 CSS 底部，则问题出在您的代码中。如果没有，问题可能出在引导程序创建的脚本中，给它样式标签，总是推翻外部 css。