代码之家 › 专栏 › 技术社区 › Julez

引导程序侧栏上图标旁边的文本对齐方式

sidebar bootstrap-4 icons html css

Julez · 技术社区 · 7 年前

我正在尝试修改 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>

请帮我弄清楚。我不知道怎么做。谢谢

1 回复 | 直到 7 年前

UncaughtTypeError 7 年前

在所提供的示例中,有问题的图标应用 固定宽度 在相应的列表项中进行统一布局;其中可能还嵌套了不同宽度的图标。

考虑使用 固定宽度图标 通过声明类 fa-fw 在列表项中的图标上。

使用fa fw以固定宽度设置图标。非常适合在不同情况下使用图标宽度偏离对齐。在导航等方面特别有用 &列表;列出组。

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>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>