我正在尝试修改 dashboard从引导。我在侧边栏的文本前添加了图标,类似于 this .我确实检查了后者,但它没有一些特殊的 CSS 代码来使文本具有统一的间距和对齐方式。
这是我的代码:
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="/">
<div>
<i id="icon-dashboard" class="fa fa-tachometer icon" aria-hidden="true"></i>
<span class="nav-link-text">Dashboard</span> <span class="sr-only">(current)</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/books">
<div>
<i id="icon-book" class="fa fa-book icon" aria-hidden="true"></i>
<span class="nav-link-text">Book</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/transactions">
<div>
<i id="icon-transaction" class="fa fa-handshake-o icon" aria-hidden="true"></i>
<span class="nav-link-text">Transaction</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/reports">
<div></div>
<div>
<i id="icon-report" class="fa fa-bar-chart icon" aria-hidden="true"></i>
<span class="nav-link-text">Report</span>
</div>
</a>
</li>
</ul>
请帮我想想办法。我不知道该怎么做。谢谢。
最佳答案
在提供的示例中,有问题的图标应用了固定宽度,以便在整个相应的列表项中实现统一布局;其中可能还嵌套了不同宽度的图标。
考虑通过在列表项中的图标上声明类 fa-fw
来使用固定宽度图标。
Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.
Font Awesome Examples - Fixed Width Icons
代码片段演示:
.list-group {
margin: 20px;
}
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
关于css - Bootstrap 边栏上图标旁边的文本对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47785915/