[英]Bootstrap navbar icons not aligned properly
I'm trying to add three icons at the right corner, search, notification bell and user.我试图在右上角添加三个图标,搜索、通知铃和用户。 I do not want to collapse since this is for an Electron desktop application and the navbar needs to be fixed.我不想崩溃,因为这是一个 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>
In doing so, the icons appear one after another vertically which widens the navbar.这样做时,图标会一个接一个地垂直出现,从而加宽了导航栏。 How do I correct this?我该如何纠正? I am relatively new to Bootstrap.我对 Bootstrap 比较陌生。
Give display: inline-block to ul and li tag.将 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>
There is a Stack Overflow answer that addresses your issue.有一个Stack Overflow 答案可以解决您的问题。
Extracting the code from this answer you will be able to custom your navbar properly:从此答案中提取代码,您将能够正确自定义导航栏:
<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>
The only thing that matter here will be the mr-auto
in the first ul
.这里唯一重要的是第一个ul
的mr-auto
。 You'll have more explanation on this page to understand how it works.您将 在此页面上获得更多解释以了解其工作原理。
On the ul
element change the class to just nav
instead of navbar-nav
& add class d-flex
在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>
Here's a codesandbox where it's working https://codesandbox.io/s/weathered-wildflower-86fv8这是一个有效的代码和盒子https://codesandbox.io/s/weathered-wildflower-86fv8
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.