为什么我的padding在bootstrap 3导航栏上崩溃？

Question

这个问题有三个部分，我认为最好在这里问所有人是否相互关联。

如果这个问题太多/超过顶部请咨询，我会修改它。

问题＃1

基本上，当我的导航栏折叠到下拉菜单中时，填充增加并在链接之间留下大量的眩光。如下所示;

通过删除line-height解决：50px;来自.navbar-default .navbar-nav＆gt; li> a {

问题＃2

我在切换模式下有一个换行符，但我似乎无法将其放在徽标下方。我猜测它的固定高度为50px，例如导航栏上的所有默认设置。

由于我的徽标高度为100px 而更改。

问题＃3

正在移除导航栏中的滚动条

通过在.navbar-collapse {max-height：340px;}更改为700px

中更新最大高度来解析

NAVBAR CSS

.navbar {
    margin-bottom: 0;
    background: #191919;
    min-height: 100px !important;
    border: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

.navbar-brand {
    position: relative;
    padding: 21px 25px 21px 25px;
    margin: 0!important;
    transition: all 0.3s ease-in-out;
    color: #1c1c1c;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.navbar-default .navbar-nav {
    margin-right: 0px!important;
    position: relative;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

.navbar-default .navbar-nav > li {
    margin-left: 3px;
}

.navbar-default .navbar-nav > li > a {
    color: #2eb60f;
    display: bold;
    font-size: 14px;
    font-weight: 200;
    overflow: hidden;
    line-height: 50px;
    padding: 20px 10px 20px 10px !important;
}

.navbar-default .navbar-nav > li > a {
    border-bottom: 3px solid #191919;
}

.navbar-default .navbar-nav > li > a.active, .navbar-default .navbar-nav > li:hover > a {
    border-bottom: 3px solid #04fa00;
    color: #04fa00;
}

.navbar-default .navbar-toggle  {
  border-color: #191919;

}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #191919;
}

.navbar-default .navbar-collapse {
    border: none;
    text-align: center;
}

.navbar-default .navbar-collapse > li > a {
    padding: 2px 1px 2px 1px !important;
}

导航栏的HTML

<div id="container">
     <header class="clearfix">
             <div class="navbar navbar-default">

             <!-- 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">

                               <i class="glyphicon glyphicon-resize-vertical" style="font-size: 16px;color:#04fa00"></i>

                       </button>
                          <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" rel="home" href="#">
                                <img style="max-width:100px; margin-top: -16px;"
                                src="/images/mainlogo.png">
    </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 navbar-right">
                            <li><a href="index.html">HOME</a></li>
                            <li><a href="about.html">ABOUT</a></li>
                            <li><a href="services.html">SERVICES</a></li>
                            <li><a href="testimonals.php">TESTIMONALS</a></li>
                            <li><a href="gallery.php">GALLERY</a></li>
                            <li><a href="contact.php">CONTACT</a></li>
                            <li><a href="admin.php">ADMIN</a></li>
                        </ul>
                  </div><!-- /.navbar-collapse -->
             </div><!-- /.navbar navbar-default -->
     </header>

</div><!-- /.end container -->

Answer 1

第一个问题：

修复穿过徽标的换行符。 .navbar-header {height：100px; }

第二个问题。

第二个滚动条是由

引起的

.navbar-collapse {max-height: 340px;} 

一起移除最大高度或将其放大以适应导航栏高度。

第3个问题。

填充/线高似乎是多个问题。如果删除

.navbar-default .navbar-nav > li > a {padding: 20px 10px 20px 10px !important;}

这将修复它以便下拉，但您仍然需要调整扩展导航栏的媒体查询。

Answer 2

问题1：你的行高使得链接如此间隔：

.navbar-default .navbar-nav > li > a {
    ...
    line-height: 50px;
}

问题2：如果没有看到完整的页面，我真的无法告诉你（我们可以查看一个网址，还是可以制作一个小提琴？）

问题3：看起来你需要一个溢出：隐藏;在其中一个包含nav的元素上，再次以完整的形式调试会更容易。

Answer 3

对于第一个问题，您可以通过从样式中删除行高来解决它。但是，这会使您的元素顶部对齐，它们看起来不会很好或垂直居中于徽标。

因此，要做到这一点，请保持行高，并根据菜单的断点引入差异行高。使用CSS的这样的东西可以工作：

第一期：

@media only screen and (max-width : 768px) {
.navbar-default .navbar-nav > li > a {
text-align:center;
line-height:1.7rem;
}}

第二期：

关于边框和徽标的第二个问题，通过使导航栏标题可以容纳您的徽标高度，可以轻松解决这个问题：

.navbar-header {min-height:70px;} /* accomodate the logo height + some padding or whatever */

关于第三个问题，我恐怕不会在小提琴上看到它。

这是一个工作小提琴供您参考：http://jsfiddle.net/p8e9aLc9/11/