html - Bootstrap 下拉菜单链接不会与导航栏中的其余链接对齐

Question

由于某些原因，下 zipper 接与 Bootstrap 导航栏中的其余链接不对齐，并且位置较低。我还可以在使用实时预览时看到它奇怪地位于其边界内，您可以在我的屏幕截图中看到。蓝色轮廓代表“.dropdown”

我发现有人在这里遇到完全相同的问题:

How to align dropdown menu in Navbar in Bootstrap with css?

但是，该解决方案对我不起作用。事实上，我根本无法通过定位、边距或填充来更改下 zipper 接的位置。

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button id="menuButton" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span><br>
        <span class="icon-bar"></span><br>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav nav-pills nav-justified">
         <li class="active"><a href="index.html"><img src="images/rainbowLogo.png" id="homeLogo"></a></li>
            <li class="dropdown">
              <a class="navbar-brand dropdown-toggle" id="dropdown" type="button" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Menus
              <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Store Menu</a></li>
                <li><a href="#">Weedmaps</a></li>
              </ul>
            </li>
        <li><a href="pakablog.html">Pakablog</a></li>
        <li><a href="apparel.html">Apparel</a></li>
        <li><a href="cultivation.html">About</a></li>   
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

CSS:

.navbar.navbar-inverse.navbar-fixed-top {
display: block;
margin: 0 auto;
width: 100%;
height:110px;
max-width: 1920px;
background-color: #222222;
}

.nav.nav-pills li a{
line-height: 3em;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
color: white;
background-color: #222222;  
font-family: 'Wendy One', sans-serif;
font-size: 36px;
display: table-cell;
margin-top: -49px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
}

.nav-pills li a:hover{
  color: #4EB848;
  background-color: #222222;

}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus{
  color: #4EB848;
  background-color: #222222;
}


@media (min-width: 768px) and (max-width: 991px) {
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}
.navbar-header {
    float:none;
}
}

#menuButton {
width:80px;
height: 80px;
align-content: center;
border-color: white;
}

 .navbar-toggle .icon-bar {
 display: block;
 width: 55px;
 height: 5px;
 background-color: #cccccc;

}

.dropdown:hover .dropdown-menu {
display: block;    
}

.dropdown-menu:hover{
display: block;
}

.navbar-brand.dropdown-toggle {
margin: 0px;
}

.dropdown {
position: absolute;
margin: 0px;
padding: 0px;
}

.dropdown-menu {
margin-top: 45px;
margin-left: -20px;
padding: 10px;

}    

Answer 1

我能够使用 .nav.nav-pills li a{} 中的行高将下拉菜单与 Bootstrap 导航栏中的其余链接对齐。我忘记了我在元素的早期使用过它来完成导航栏中链接的一般对齐。进一步将值从 3em 调整为 2.1em 将下拉菜单带到其他链接的位置:

.nav.nav-pills li a{
**line-height: 2.1em;**
padding: 0px;
padding-left: 5px;
padding-right: 5px;
color: white;
background-color: #222222;  
font-family: 'Wendy One', sans-serif;
font-size: 36px;
display: table-cell;
margin-top: -49px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}