Question

所以我有这个Navbar，我在最右边添加了一个Dropdown菜单和一个用户配置文件。[我的NavBar的ScreenShot] [1]。正如您所看到的，下拉菜单比我的其他菜单项略低。

这是我的HTML和CSS：

.dropdown {
  padding-top: 0px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <!--LOGO-->
      <a class="navbar-brand" href="index.php"><img src="assets/img/am.png" alt="ArchiveManager" height="35"></a>
    </div>

    <div>
      <div class="collapse navbar-collapse">
        <!--Menu Items-->
        <ul class="nav navbar-nav" style="font-size:15px;">
          <li><a href="index.php">Home</a></li>
          <li><a href="newIssue.php">New Issue</a></li>
          <li><a href="newArticle.php">New Article</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Management<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="magManagement.php">Magazine Management</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Article Management</a></li>
            </ul>
          </li>
          <li><a href="#">Statistics</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Answer 1

在尝试了很多不同的事情后，这很有效。

.dropdown {
  margin-top: 0px;
}

然后刷新我的浏览器（ CTRL + F5 ），然后就可以了。可能它是从缓存中读取的，当我更改代码时没有发生任何事情。

谢谢大家！

Answer 2

您是否检查过是否有上边距？尝试设置margin-top：0。

.dropdown{
    margin-top: 0px;
}

您应该打开浏览器开发人员工具并选择元素检查器，以查看正在按下该下拉列表的CSS属性。

您还可以使用position：relative CSS属性以及top：-5px来提取下拉列表，但这不是一个好的解决方案，因为您最好找到推动该元素的真正原因。

我还建议不要全局编辑.dropdown类，并添加一个类似的附加类。

<li class="someclass dropdown">

这样您可以编辑CSS，如下所示，并且不会影响您可能添加到页面内容的其他下拉列表。

.someclass.dropdown{
    margin-top: 0px;
}

希望这有帮助。

Answer 3

＆＃13;

{{1}}

＆＃13;

Answer 4

试试这个：

<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <!--LOGO-->
            <a class="navbar-brand" href="index.php"><img src="assets/img/am.png" alt="ArchiveManager" height="35"></a>
        </div>
 ....

如何使用CSS对齐Bootstrap中Navbar中的下拉菜单？

4 个答案: