如何在Bootstrap 4导航栏中将品牌标志设置到左边缘？ [英] How to set the brand logo in Bootstrap 4 navbar to the left edge?

问题描述

我有如下所示的标志。

 < nav class =navbar navbar-fixed-top navbar-light bg-primary> 
< div class =container-fluid> 
< img class =navbar-brandsrc =logo.pngalt =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-brandsrc =logo.pngalt =logostyle =margin-left：0px;> 
  

$

解决方案

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

https://jsfiddle.net/gsb3ohd2/

 < nav class =navbar navbar-fixed-top navbar-light bg-primary> 
< div class =row> 
< img class =navbar-brandsrc =logo.pngalt =logo> 
< ul class =nav navbar-nav> 
< li class =nav-item>< a href =＃class =nav-link> START< / a>< / li> 
 ... 
< / ul> 
< / div> 
< / nav> 
  

I have a logo as shown below.

<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 adds a piece of padding on the left resulting in the following offset from the edge.

Since our logo is a cut off circle, we want it to be placed precisely at the edge to create illusion of a real circle but sticking outside of the browser. I've tried to set a negative margin on the left side but it only moved the image, still retaining the weird edge as shown below.

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

What can I do about it?

解决方案

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>

这篇关于如何在Bootstrap 4导航栏中将品牌标志设置到左边缘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！