css - 屏幕宽度达到 800 像素后， Bootstrap 中显示的水平条

Question

好的，所以我和其他 100 个人一样面临同样的问题，我尝试了这里的一些解决方案，但没有一个有效，这就是为什么要打开我自己的主题。

我正在创建一个 bootstrap WordPress 主题。导航工作正常，但是当我将窗口大小时调整到 800 像素以下时，会出现一个水平条 [附有屏幕截图]。我如何解决它？

我的标题代码:

    <div id="navigation">
    <nav class="navbar navbar-custom" role="navigation">
          <div class="container">
                <div class="row">
                      <div class="col-sm-2">
                          <div class="site-logo">
                            <a href="index.html" class="brand">Augusta</a>
                          </div>
                      </div>                          

                      <div class="col-sm-10"> 

                          <!-- Brand and toggle get grouped for better mobile display -->
                          <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                                <i class="fa fa-bars"></i>
                            </button>
                          </div>
                          <!-- Collect the nav links, forms, and other content for toggling -->
                          <div class="collapse navbar-collapse" id="menu">
                            <?php wp_nav_menu( array( 
                            'theme_location' => 'secondary', 
                            'menu_class' => 'nav navbar-nav navbar-right', 
                            'fallback_cb' => 'false' 
                            )); ?>
                          </div>
                          <!-- /.Navbar-collapse -->

                      </div>
                </div> <!--bootstrap row end-->
          </div> <!--bootstrap container end-->
    </nav>
</div> 

&我的CSS:

.navbar-custom {
    background-color: #252222;
    border-color: #252222;
}

.navbar-custom a.brand{
    color: #fff;
    font: 42px "bebas_neueregular";
}

.navbar {
    height: 100px;
    margin-bottom: 0;
    border-radius: 0 !important;
}

.navbar-custom .navbar-nav {
    margin-top: 25px;
}

.navbar-custom .navbar-nav > li {
    padding-left: 20px;
}

/* link */
.navbar-custom .navbar-nav > li > a {
    font: 20px "bebas_neueregular";
    color: #fff;
    transition: all 0.5s ease-in;

}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
    color: #65ba99;
    background: transparent;
}

/* mobile version */

.navbar-custom .navbar-toggle {
    border-color: #fff;
    margin-top: -70px;
}

.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
    background-color: #65ba99;
    border-color: #87f5ca;
}

.navbar-custom .navbar-toggle .fa {
    color: #fff;
}

.navbar-custom .navbar-toggle:hover .fa,
.navbar-custom .navbar-toggle:focus .fa{
    color: #fff;
}

.navbar-collapse{overflow-x:hidden;}

@media (max-width: 767px) {

    .navbar-custom {
        height: auto;
    }

    .navbar-header {
        margin-top: 20px;
    }

}

Answer 1

由于以下 css 代码，滚动条即将出现:

.navbar-custom .navbar-nav > li {
    padding-left: 20px;
}

Please try this:

.navbar-custom .navbar-nav > li {
    padding-left: 0px;
}