如何将引导程序导航栏中的下拉菜单与 css 对齐

Question

所以我有这个导航栏，我正在最右侧添加一个下拉菜单和一个用户配置文件。我的导航栏的屏幕截图][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

您是否检查过是否有上边距？尝试设置边距顶部：0也。

.dropdown{
    margin-top: 0px;
}

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

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

我还建议不要全局编辑 .dropdown 类并添加这样的附加类。

<li class="someclass dropdown">

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

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

希望这有帮助。

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>

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>
 ....