更大的標誌，不會影響導航欄中的其他元素

我的主要問題是帶有徽標。以下是我的標題元素，我附上了我的導航欄和徽標。標題包含背景圖片，並在其中放置了我的導航欄。更大的標誌，不會影響導航欄中的其他元素

HTML

<div class="header"> 
    <div class="container"> 
     <div class="container"> 
      <nav class="navbar navbar-expand-lg navbar-light bg-faded"> 
       <a class="navbar-brand" href="#"><img src="images/logo.svg" /></a> 
       <button class="navbar-toggler" type="button" data-toggle="collapse" 
         data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" 
         aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"></span> 
       </button> 
       <div id="navbarNavDropdown" class="navbar-collapse collapse justify-content-end"> 
        <ul class="navbar-nav "> 
         <li class="nav-item"> 
          <a class="nav-link" href="#">Login</a> 
         </li> 
         <li class="nav-item"> 
          <a class="nav-link" href="#">Register</a> 
         </li> 
        </ul> 
       </div> 
      </nav> 
     </div> 
    </div> 
</div>

CSS

.navbar-brand > img { 
    width: 100%; 
}

它看起來像這樣： image

當我爲標誌指定寬度（如20em），它成爲更大但它移動了li項目。我不希望我的li項目受到影響。另外，我希望徽標在指定寬度時能夠作出響應，但在較小的屏幕中仍然保持不變。

iamge2

來源

2017-10-17 Alp Şenel

我嘗試了很多具有標誌尺寸上bootstrap3導航欄。對我來說這最好。

首先，我給導航欄添加我想要的高度，並將li>一個行高設置爲相同的高度，以便鏈接填充頂部和填充底部固定（鏈接垂直居中）。

.navbar { 
    min-height: 100px; 
} 
ul.navbar-nav > li > a { 
    line-height: 100px; 
}

導航欄現在是100px高度。考慮到填充因素，我的徽標現在應該具有80px的最大高度，因爲我們需要10px的填充頂部和10px的填充底部。可以說，標誌的寬度爲200px，高度爲80px，我給img分類標誌。

<a class="navbar-brand" href="#"><img src="#" class="logo" alt=""></a>

現在請記住填充，我將10px的填充頂部添加到徽標。

img.logo { 
    padding-top: 0px; 
    width: 200px; 
    height: auto; 
}

如果你想不同標誌的大小，只是改變了導航欄最小高度/線路的高度和更改徽標寬度/填充。

引導3小提琴： https://jsfiddle.net/yghg5hsx/

引導4小提琴： https://jsfiddle.net/973Lde7j/3/

來源

2017-10-19 10:57:44 grusl83

感謝您的答覆，但我使用引導4不是3，我已經習慣到3，但我的公司希望繼續與4 –

引導程序是相同的4.我更新了jsfiddle：https：//jsfiddle.net/973Lde7j/3/ – grusl83

把你的標誌一個div和導航欄內容的另一個div的，其餘內

那就試試這個：

#navbar { width:100%} 

#logoDiv { width:20% } 
#contentDiv { width:80% }

來源

2017-10-17 16:05:58

更大的標誌，不會影響導航欄中的其他元素

回答

相關問題