html - 移动设备中 twitter bootstrap 3.0 中行类的全宽

Question

我正在构建一个网站，当网站响应移动设备时，导航栏的深色条比全宽少几个像素。

这是我的 HTML:

<div id="wrapper hidden-xs">
<!--Header Section-->
<div class="row backgroundColor"> 
  <!--Navigation-->
  <div class="col-xs-12 col-md-12">
    <nav class="navbar navbar-default" role="navigation"> 
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    <a class="navbar-brand" href="http://ljferris.com"><img src="images/featherLogo.png" class="img-responsive" alt="Imagine Logo" /></a> </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Me</a></li>
      <li class="dropdown"> <a href="#" class="dropdown-toggle" id="portfolio" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Web Development</a></li>
          <li><a href="#">Academia</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Connect</a></li>
    </ul>
  </div>
  <!-- /.navbar-collapse --> 
</nav>
</div>
</div>

这是 CSS:

#wrapper{
    max-width: 1400px;
}

.row{
    margin: 0 !important;
}

/** Navigation **/
.backgroundColor{
    width: 100%;
    background-color: #313131;
}

.navbar{
    height: 80px;
    -webkit-border-radius: 0 0;
    -moz-border-radius: 0 0;
    -0-border-radius: 0 0;
     border-radius: 0 0;
     border-bottom: 1px solid #061b33;
     border-right: none;
     border-left: none;
     border-top: none;
     text-transform: uppercase;
     background-color: #313131;
     font-size: 16px;
}
.navbar-brand{
    padding: 15px 122px 0 122px;
}

.navbar-nav{
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    padding-right: 80px;
    float: right;
    text-transform: none;
    font-weight: 100;
}

.navbar-nav li{
    padding-top: 20px;
}

.navbar-nav>li>a{
    font-size: 1em;
    color: #EC5657 !important;
}


.navbar-nav>li>a:hover{
    color: #d7d7d7 !important;
    background-color:  #EC5657;

    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -0-transition: color 0.2s ease-in-out;
     transition: color 0.2s ease-in-out;
}

.navbar-nav>.open>a:focus{
    background-color: transparent !important;
}

.dropdown-menu{
    background-color: #313131;
    border-top: 3px solid #fff;
    margin-top: -10px !important;
    z-index: 999999;

}

.dropdown-menu>li>a{
    background-color: transparent;
    color: #EC5657 !important;
}

.dropdown-menu>li>a:hover{
    color: #d7d7d7 !important;
    background-color: transparent;

    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -0-transition: color 0.2s ease-in-out;
     transition: color 0.2s ease-in-out;
}

@media (max-width: 768px){
    .navbar{
        border: none;
    }

    .navbar-brand{
        padding: 10px 0 0 20px;
    }

    ul.navbar-nav{
        background-color: #131313;
    }

    .navbar-collapse.in{
        margin-top: 13px;
    }

    ul.nav.navbar-nav{
        background-color: transparent;
        border-top: none;

    }

    #bs-example-navbar-collapse-1{
        z-index: 999999;
        float: right;
        border-top: none;
    }

网址是http://ljferris.com - 有没有人可以帮助我解决我的问题？

Answer 1

它是 #information 的边距。您必须以较小的尺寸将其删除。实际上，这只是可能导致问题的想法——BS3 是相反构建的。它咬了我几次。移动设备优先 = 默认情况下没有边距，然后您添加更大的尺寸。

#information { 
    margin: 20px 0; 
}

@media(min-width:768px) {
    #information { 
        margin: 20px; 
    }
}