css - Bootstrap 导航栏中的材质图标未正确对齐
问题描述
在导航栏中使用引导程序 4 和 Material Icon 并且图标未正确对齐
您可能会在这个小提琴中看到 https://jsfiddle.net/saamisolutions/7phge3ro/5/
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
<i class="material-icons">home</i>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="material-icons">build</i>Configuration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="material-icons">person</i>User Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="material-icons">more_horiz</i>More</a>
</li>
</ul>
</div>
</div>
</nav>
解决方案
您可以使用 cssvertical-align
来解决此问题。我建议适用于所有 Material Icons。
.material-icons {
vertical-align: middle;
}
或者,您可以使用margin-right: 5px
更多的呼吸空间。
推荐阅读
- xamarin.forms - 如何在 xamarin 表单 wpf 应用程序中添加应用程序图标徽章
- ag-grid - 在ag-grid中隐藏按钮单击的列?
- sql-server - 将 SSRS 报告导出为 CSV 格式时出现问题
- javascript - 如果键与数组值匹配,如何获取值
- javascript - 反馈加载 iframe 有时效果不佳
- c - 这个函数做了什么来帮助它以不同的方式接受输入以及 for 循环中的条件是如何执行的
- python - 删除 Beautiful Soup 中的标签
- javascript - Firstore 数据不起作用
- javascript - 对象标签的数据属性是否有错误事件?
- ruby-on-rails - 使用自定义时间安排任务