html – 如何在Bootstrap 4导航栏中将品牌徽标设置为左边缘?

前端之家收集整理的这篇文章主要介绍了html – 如何在Bootstrap 4导航栏中将品牌徽标设置为左边缘?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个徽标,如下所示.
  1. <nav class="navbar navbar-fixed-top navbar-light bg-primary">
  2. <div class="container-fluid">
  3. <img class="navbar-brand" src="logo.png" alt="logo">
  4. <ul class="nav navbar-nav">
  5. <li class="nav-item"><a href="#" class="nav-link">START</a></li>
  6. ...
  7. </ul>
  8. </div>
  9. </nav>

Bootstrap在左侧添加一块填充,导致从边缘偏移以下.

由于我们的徽标是一个截断圆圈,我们希望它被精确地放置在边缘,以创建一个真实圆圈的幻觉,但坚持在浏览器之外.我试图在左侧设置一个负边距,但它只移动了图像,仍然保留了奇怪的边缘,如下所示.

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

我能做些什么呢?

解决方法

您可以使用行而不是容器流体.这两个边缘相反.

https://jsfiddle.net/gsb3ohd2/

  1. <nav class="navbar navbar-fixed-top navbar-light bg-primary">
  2. <div class="row">
  3. <img class="navbar-brand" src="logo.png" alt="logo">
  4. <ul class="nav navbar-nav">
  5. <li class="nav-item"><a href="#" class="nav-link">START</a></li>
  6. ...
  7. </ul>
  8. </div>
  9. </nav>

猜你在找的HTML相关文章