如何對齊Bootstrap中的導航欄中的下拉菜單與CSS？

所以我有這個導航欄，我在最右邊添加了一個下拉菜單和一個用戶配置文件[我的NavBar的屏幕截圖] [1]。正如你所看到的下拉菜單比我的其他菜單項低一點。如何對齊Bootstrap中的導航欄中的下拉菜單與CSS？

這是我的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>

來源

2017-05-26 Syed Farhan Habib

請嘗試使用.dropdown { margin-top：-10px; } –

創建代碼的小提琴，以便我們可以看到問題。 –

[https://stackoverflow.com/questions/44196301/how-to-align-dropdown-menu-in-navbar-in-bootstrap-with-css/44196618#44196618]選中此項。 –

你檢查，看看是否有上邊距？嘗試設置margin-top：0。

.dropdown{ 
    margin-top: 0px; 
}

你應該打開你的瀏覽器開發者工具，並選擇元素檢查，看看有什麼CSS屬性向下推下拉。

您還可以使用位置：相對CSS屬性以及頂部：-5px拉出下拉菜單，但這不是一個好的解決方案，因爲您最好找到推倒元素的真正原因。

我也建議不要編輯全局的.dropdown類，並添加一個像這樣的附加類。

<li class="someclass dropdown">

這樣你就可以編輯CSS，如下圖所示，並且不會影響你可能添加到頁面內容的其他下拉菜單。

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

希望這會有所幫助。

來源

2017-05-26 07:57:35

它不工作，既不margin-top：0px;也不是-5px; –

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

來源

2017-05-26 08:05:50

@ syed-farhan-habib請檢查此 –

試試這個：

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

來源

2017-05-26 08:50:34

添加反向導航欄也不能解決問題。 –

嘗試了很多不同的東西后，這個工作

.dropdown { 
    margin-top: 0px; 
}

，然後刷新瀏覽器（CTRL + F5）然後它工作。也許它是從緩存中讀取的，當我改變代碼時什麼都沒有發生。

謝謝大家！

來源

2017-05-26 12:39:07

如何對齊Bootstrap中的導航欄中的下拉菜單與CSS？

回答

相關問題