更大的标志，不会影响导航栏中的其他元素

问题描述：

我的主要问题是带有徽标。以下是我的标题元素，我附上了我的导航栏和徽标。标题包含背景图片，并在其中放置了我的导航栏。更大的标志，不会影响导航栏中的其他元素

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

答

我尝试了很多具有标志尺寸上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/

感谢您的答复，但我使用引导4不是3，我已经习惯到3，但我的公司希望继续与4 –

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

答

把你的标志一个div和导航栏内容的另一个div的，其余内

那就试试这个：

#navbar { width:100%} 

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

更大的标志，不会影响导航栏中的其他元素

相关推荐