Question

我可以让我的徽标适合Navbar。我只是把它放进去了。但是，我希望我的徽标从Navbar突出一点。也就是说，我希望我的徽标的10％位于导航栏上方，10％位于导航栏下方，徽标的其余部分应位于导航栏的中心位置。

我正在使用从wrapbootstrap.com在线购买的模板，模板显然使用bootstrap。这是导航栏的代码

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#custom-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <img src="assets/images/logo.png" alt="Logo">
</div>

Answer 1

你可能会使用z索引，并使图像大10％。因此，为徽标制作一个课程

    .logo {
    z-index: 2;
    margin-top: -10px; /* You just have to play with this a little bit to get the preferred result*/
    }
    .navbar-header {
    z-index: 1; 
    }

然后使徽标更大一些。玩一点宽度和高度。 `

Answer 2

我会使用相对和绝对定位。如果您的导航栏高度为50px且徽标高度为70px，则可以设置.navbar-header{position:relative; height:50px;}和.logo{position:absolute; top:-10px;}，这样您就可以在导航栏上方和下方留下10px。

从导航栏突出的徽标

2 个答案: