Bootstrap中的Navbar中的下拉菜单如何对齐css？ [英] How to align dropdown menu in Navbar in Bootstrap with css?

问题描述

所以我有了这个导航栏，我在最右边添加了一个下拉菜单和一个用户配置文件[我的NavBar的屏幕截图] [1]。
正如你所看到的下拉菜单比我的其他菜单项低一点。

这是我的HTML和CSS：

  .dropdown {padding-top：0px;}  

 < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u crossorigin =anonymous>< nav class =navbar navbar-custom> < div class =container-fluid> < div class =navbar-header> <！ -  LOGO  - > < a class =navbar-brandhref =index.php>< img src =assets / img / am.pngalt =ArchiveManagerheight =35>< / a> < / DIV> < DIV> < div class =collapse navbar-collapse> <！ - 菜单项目 - > < ul class =nav navbar-navstyle =font-size：15px;> < li>< a href =index.php>主页< / a>< / li> < li>< a href =newIssue.php>新问题< / a>< / li> < li>< a href =newArticle.php>新文章< / a>< / li> < li class =dropdown> < a href =＃class =dropdown-toggledata-toggle =dropdownrole =buttonaria-haspopup =truearia-expanded =false>管理< span class =caret >< /跨度>< / A> < ul class =dropdown-menu> < li>< a href =magManagement.php>杂志管理< / a>< / li> < li role =separatorclass =divider>< / li> < li>< a href =＃>文章管理< / a>< / li> < / UL> < /锂> < li>< a href =＃>统计信息< / a>< / li> < / UL> < / DIV> < / DIV> < / div>< / nav>  

解决方案

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

  .dropdown {
 margin-top：0px; 
} 
  

您应该打开浏览器开发工具并选择元素检查器以查看CSS属性会降低下拉菜单。

您还可以使用位置：相对CSS属性和顶部：-5px拉出下拉菜单，但这不是好的解决方案，因为您最好找到推倒元素的真正原因。

我也建议不要全局编辑.dropdown类并添加一个类所以。

 < li class =someclass dropdown> 
  

通过这种方式您可以编辑CSS，如下所示，并且不会影响您可能添加到页面的其他下拉菜单内容。

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

希望这有助于您。

So I have this Navbar and I am adding a Dropdown Menu and a user profile on the Right most.[ScreenShot of my NavBar][1]. As you can see the drop downs are a bit lower than the rest of my menu items.

Here is my HTML and 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>

解决方案

Have you checked to see if there is a top margin? Try setting margin-top:0 as well.

.dropdown{
    margin-top: 0px;
}

You should open up your browsers developer tools and select the element inspector to see what CSS property is pushing down the dropdown.

You can also pull up the dropdown using the position:relative CSS property along with a top:-5px but this is not a good solution because you are better off finding the real cause of what is pushing down the element.

I would also recommend not editing the .dropdown class globally and adding an additional class like so.

<li class="someclass dropdown">

that way you can edit the CSS as shown below and no effect other dropdowns you may add to the page content.

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

Hope this helps.

这篇关于Bootstrap中的Navbar中的下拉菜单如何对齐css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！