如何将 Bootstrap 4 导航栏中的品牌标志设置为左边缘? [英] How to set the brand logo in Bootstrap 4 navbar to the left edge?
问题描述
我有一个如下所示的标志.
</nav>
Bootstrap 在左侧添加了一块填充，从而导致与边缘的以下偏移.
由于我们的标志是一个截断的圆，我们希望它精确地放置在边缘，以创造一个真正的圆的错觉，但它会粘在浏览器之外.我试图在左侧设置一个负边距，但它只移动了图像，仍然保留了如下所示的奇怪边缘.
<img class="navbar-brand" src="logo.png" alt="logo" style="margin-left: 0px;">我该怎么办?
您可以使用 row 代替 container-fluid.这两个具有相反的边距.
https://jsfiddle.net/gsb3ohd2/
</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屋！
