Bootstrap 4 navbar中的品牌标志如何设置到左边缘?
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-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 在左侧添加一段填充,导致以下距边缘的偏移量。
由于我们的徽标是一个截断的圆圈,我们希望将它精确地放置在边缘以创建一个真正的圆圈的错觉,但会突出浏览器之外。我试图在左侧设置一个负边距,但它只是移动了图像,仍然保留了奇怪的边缘,如下所示。
<img class="navbar-brand" src="logo.png" alt="logo" style="margin-left: 0px;">
我该怎么办?
删除.navbar-brand
和.container-fluid.navbar-container
的左填充(你不想覆盖.container-fluid
的样式,所以添加一个新的class) .
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;
}
工作fiddle:https://jsfiddle.net/9t20dmLk/1/
您可以使用 row
而不是 container-fluid
。这两个有相反的边缘。
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>
我有如下图所示的标志。
<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 在左侧添加一段填充,导致以下距边缘的偏移量。
由于我们的徽标是一个截断的圆圈,我们希望将它精确地放置在边缘以创建一个真正的圆圈的错觉,但会突出浏览器之外。我试图在左侧设置一个负边距,但它只是移动了图像,仍然保留了奇怪的边缘,如下所示。
<img class="navbar-brand" src="logo.png" alt="logo" style="margin-left: 0px;">
我该怎么办?
删除.navbar-brand
和.container-fluid.navbar-container
的左填充(你不想覆盖.container-fluid
的样式,所以添加一个新的class) .
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;
}
工作fiddle:https://jsfiddle.net/9t20dmLk/1/
您可以使用 row
而不是 container-fluid
。这两个有相反的边缘。
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>