html - 如何将 Bootstrap 4 导航栏中的品牌标志设置到左边缘？

Question

我有一个标志，如下图所示。

<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="container-fluid">
    <img class="navbar-brand" src="logo.png" alt="logo">
    <ul class="nav navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">START</a></li>
      ...
    </ul>
  </div>
</nav>

Bootstrap 在左侧添加了一段填充，导致以下距边缘的偏移量。

由于我们的 Logo 是一个截断的圆圈，我们希望将它精确地放置在边缘以创建一个真正的圆圈的错觉，但会突出浏览器之外。我试图在左侧设置一个负边距，但它只是移动了图像，仍然保留了奇怪的边缘，如下所示。

<img class="navbar-brand" src="logo.png" alt="logo" style="margin-left: 0px;">

我该怎么办？

Answer 1

您可以使用 row 而不是 container-fluid。这两个有相反的边缘。

https://jsfiddle.net/gsb3ohd2/

<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="row">
    <img class="navbar-brand" src="logo.png" alt="logo">
    <ul class="nav navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">START</a></li>
      ...
    </ul>
  </div>
</nav>