如何在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在左侧添加一块填充，导致从边缘偏移以下。

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

<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>

Answer 2

删除.navbar-brand和.container-fluid.navbar-container的左侧填充（您不想覆盖.container-fluid的样式，因此请为其添加新类。）

<强> HTML

<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="container-fluid navbar-container">
    <img class="navbar-brand" src="logo.png" alt="logo">
  </div>
</nav>

<强> CSS

.container-fluid.navbar-container, .navbar-brand {
  padding-left: 0;
}

工作小提琴：https://jsfiddle.net/9t20dmLk/1/