Bootstrap 下拉菜单链接不会与导航栏中的其他链接对齐答案

【问题标题】：Bootstrap Dropdown Menu Link Won't Align with Rest of Links in NavbarBootstrap 下拉菜单链接不会与导航栏中的其他链接对齐
【发布时间】：2018-02-18 09:28:09
【问题描述】：

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

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

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

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

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;

}

【问题讨论】：

为什么你不能用边距和填充来改变它。您是否尝试过，或者它只是不适合这个项目？
我试过了。您现在可以在代码中看到我有边距：0px 和位置：绝对。我也尝试使用负值的 margin-top 将其向上移动。
Padding 也设置为 0px，但它仍然有大量的填充，由蓝色框显示，甚至没有居中。我在另一个项目中遇到了同样的问题，但我可以用边距移动它。我不知道为什么它不会让我。我希望有人会看到我犯的一些愚蠢的错误。
引导程序的V4或V3
第 3 版。我可以使用 line-height 调整链接位置。

标签： html css twitter-bootstrap drop-down-menu navbar

【解决方案1】：

我能够将下拉菜单与引导导航栏中的其余链接与 .nav.nav-pills li a{} 中的行高对齐。我忘记了我在项目的早期使用它来完成导航栏中链接的一般对齐。进一步将值从 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;
}

【讨论】：