如何解決導航欄品牌標志問題

Question

我將徽標添加到導航欄，但隨后發生了一些奇怪的事情。 我的導航欄中包含多個單詞的每個項目，用空格分隔，都會被推回。 見下圖：

當前導航欄問題

由於我沒有那么有經驗，因此我嘗試為此尋找常見的修復程序，因為我看不到我的代碼有任何問題。

我試過display: infline-flex; !important display: infline-flex; !important但沒有成功。

 navbar-brand position: absolute; left: 50%;

似乎有效，但我不能以這種方式將它放在導航欄的左側

這是我的導航欄代碼的樣子：

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar fixed-top navbar-expand-md bg-light navbar-light py-3 shift" id="mainNav"> <div class="container"> <a href="#" class="navbar-brand"> <img src="img/jd_full.png" width="20%" alt="logo" /> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse nav-container" id="navmenu"> <ul class="navbar-nav ms-auto text-uppercase"> <li class="nav-item"> <a href="#overmij" class="nav-link">over mij</a> </li> <li class="nav-item"> <a href="#opleiding" class="nav-link">opleiding</a> </li> <li class="nav-item"> <a href="#stage" class="nav-link">stage</a> </li> <li class="nav-item"> <a href="#realisaties" class="nav-link">realisaties</a> </li> </ul> </div> </div> </nav> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>

我檢查了 navbar-brand 類的填充，但沒有結果。 任何人都知道解決這個問題？

Answer 1

您的問題是由您設置的寬度引起的，因為徽標使用與導航欄比例相當的固定大小。

將這個<img src="img/jd_full.png" width="20%" alt="logo">更改為另一個<img src="img/jd_full.png" width="120px" alt="logo">