web-dev-qa-db-fra.com

Comment définir le logo de la marque dans Bootstrap 4 barre de navigation sur le bord gauche?

J'ai un logo comme indiqué ci-dessous.

<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 ajoute un morceau de rembourrage sur la gauche, ce qui entraîne le décalage suivant par rapport à l'Edge.

enter image description here

Étant donné que notre logo est un cercle coupé, nous voulons qu'il soit placé précisément sur le bord pour créer l'illusion d'un vrai cercle mais en restant à l'extérieur du navigateur. J'ai essayé de définir une marge négative sur le côté gauche, mais cela n'a fait que déplacer l'image, tout en conservant le bord étrange comme indiqué ci-dessous.

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

enter image description here

Que puis-je faire à ce sujet?

htmlcsstwitter-bootstrapbootstrap-4
8
Konrad Viltersten

Vous pouvez utiliser row au lieu de container-fluid. ces deux ont des marges opposées.

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

Retirez le rembourrage gauche de .navbar-brand et .container-fluid.navbar-container (vous ne voulez pas remplacer les styles de .container-fluid, donc ajoutez-y une nouvelle classe).

[~ # ~] 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;
}

Violon de travail: https://jsfiddle.net/9t20dmLk/1/

3
Arun Kumar Mohan