How to set the brand logo in Bootstrap 4 navbar to the left edge?

Question

I have a logo as shown below.

  

    

        
                      

              相关标签:
       
      

Answer 1

You can use row instead of container-fluid. these two have opposite margins.

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

Remove the left padding of .navbar-brand and .container-fluid.navbar-container(you don't want to override the styles of .container-fluid, so add a new class to it).

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

Working fiddle: https://jsfiddle.net/9t20dmLk/1/