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

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

Answer 2

我无法使用脚本测试您的代码，但您可以试试这个;

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

在你的CSS顶部。如果你把它放在最上面，那么另一个css（创建边距和填充）将在此之后被否决。

如果它不起作用，请尝试将其置于底部，以查看它是否以任何方式工作。如果它在你的CSS的底部，问题出在你的代码中。如果没有，问题可能出在bootstrap为它设置样式标签的脚本中，它总是否决外部css。

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

CSS

HTML

SCRIPT

2 个答案: