Html 如何将 Bootstrap 4 导航栏中的品牌标志设置为左边缘？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41308731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the brand logo in Bootstrap 4 navbar to the left edge?
提问by Konrad Viltersten
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.
Bootstrap 在左侧添加了一块填充，从而导致与边缘的以下偏移。
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.
由于我们的 logo 是一个切掉的圆，我们希望它精确地放置在边缘，以创建一个真实的圆的错觉，但会粘在浏览器之外。我试图在左侧设置一个负边距，但它只移动了图像，仍然保留了奇怪的边缘，如下所示。
<img class="navbar-brand" src="logo.png" alt="logo" style="margin-left: 0px;">
What can I do about it?
我该怎么办？
采纳答案by Banzay
You can use rowinstead of container-fluid. these two have opposite margins.
您可以使用row代替container-fluid. 这两个具有相反的边距。
https://jsfiddle.net/gsb3ohd2/
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>
回答by Arun Kumar Mohan
Remove the left padding of .navbar-brandand .container-fluid.navbar-container(you don't want to override the styles of .container-fluid, so add a new class to it).
删除.navbar-brandand的左侧填充.container-fluid.navbar-container（您不想覆盖 的样式.container-fluid，因此向其添加一个新类）。
HTML
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
CSS
.container-fluid.navbar-container, .navbar-brand {
padding-left: 0;
}
Working fiddle: https://jsfiddle.net/9t20dmLk/1/
工作小提琴：https: //jsfiddle.net/9t20dmLk/1/
