[英]Bootstrap navbar icons not aligned properly
我试图在右上角添加三个图标,搜索、通知铃和用户。 我不想崩溃,因为这是一个 Electron 桌面应用程序,导航栏需要修复。
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
</a></li>
</ul>
</nav>
这样做时,图标会一个接一个地垂直出现,从而加宽了导航栏。 我该如何纠正? 我对 Bootstrap 比较陌生。
将 display: inline-block 赋予 ul 和 li 标签。
ul.navbar-nav, li.nav-item{ display: inline-block; }
<nav class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link p-2" href="#"> <img src="node_modules/bootstrap-icons/icons/search.svg" alt=""> </a></li> <li class="nav-item"><a class="nav-link p-2" href="#"> <img src="node_modules/bootstrap-icons/icons/bell.svg" alt=""> </a></li> <li class="nav-item"><a class="nav-link p-2" href="#"> <img src="node_modules/bootstrap-icons/icons/person.svg" alt=""> </a></li> </ul> </nav>
有一个Stack Overflow 答案可以解决您的问题。
从此答案中提取代码,您将能够正确自定义导航栏:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-brand" href="#">Navbar</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
</a></li>
</ul>
</nav>
这里唯一重要的是第一个ul
的mr-auto
。 您将 在此页面上获得更多解释以了解其工作原理。
在ul
元素navbar-nav
类更改为nav
而不是navbar-nav
并添加类d-flex
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav d-flex">
<li class="nav-item">
<a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/search.svg" alt="" />
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/bell.svg" alt="" />
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/person.svg" alt="" />
</a>
</li>
</ul>
</nav>
这是一个有效的代码和盒子https://codesandbox.io/s/weathered-wildflower-86fv8
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.