Question

我想在bootstrap 4 beta框架的导航栏中添加我的徽标。导航栏的高度应该与没有徽标的正常高度相同或几乎相同，就像您在第一个示例中看到的那样。

没有和带徽标的示例

<nav class="navbar navbar-expand-md navbar-light" style="background-color: #CECFFF;">
       <a class="navbar-brand" href="/"><img src="logo.png"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown">
          ....
          </li>           
        </ul>
      </div>
    </nav>

https://codepen.io/anon/pen/gGpJLq

此处another question的解决方案仅适用于bootstrap 4 alpha工作。

Answer 1

您可以指定图片的高度，以确保它不会通过向img添加类来增加导航栏的大小。像这样：

.logo {
  max-height: 40px;
  padding: 0;
}

Answer 2

<a class="navbar-brand" href="/">
 <img src="https://www.lern-online.net/bilder/logo.png" style="height: 35px; padding: 0 auto;">
</a>

这里你可以清楚地看到我给出了一个内联样式，你可以根据需要手动修改它。

这里的问题是你使用的图像出现在它的默认大小中，因此导航栏正在修改以适应它我们可以通过确保我们的图像的大小来预测它。

希望我帮忙。

添加徽标到bootstrap 4 beta导航栏

2 个答案: