Bootstrap Navbar图片太大

Question

我是Bootstrap 4的新手，我对导航栏有疑问。因此，我想在其旁边添加我的公司名称和徽标，但由于某种原因，图像太大了。我该怎么做才能更改图像的大小以适合导航栏的内部。谢谢！

<nav class="navbar navbar-expand-sm fixed-top">
    <div class="container">
      <a href="index.html" class="navbar-brand text-dark display-4">
        <img id="ojLogo" src="img/ojicon.png"> OddJob
      </a>
    </div>
</nav>

Answer 1

您必须定义徽标图像的高度以减小其图像尺寸。为了使公司名称旁边也需要向左浮动图像。如有必要，还可以定义导航栏品牌的宽度。您可以使用以下CSS：

.navbar-brand {
  width:150px;
  font-size: 24px;
}
.navbar-brand img {
  height: 50px;
  /* put value of image height as your need */
  float: left;
  marginn-right: 7px;
}