Bootstrap 侧边栏中图标旁的文本对齐

Question

Bootstrap 侧边栏中图标旁的文本对齐

3

我正在尝试修改 Bootstrap 的仪表盘。我在侧边栏的文本前添加了图标，类似于这个。我检查了后者，但它没有特殊的 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>

请帮我解决问题。我完全不知道该怎么做。谢谢。

- Julez

你是指图标宽度不同导致的图标后和文本前的不均匀间距吗？ - undefined

你能添加一个功能片段吗？ - undefined

@UncaughtTypeError 是的。 - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- UncaughtTypeError · Accepted Answer

在所提供的示例中，涉及到的图标为相应列表项提供固定宽度，以实现统一布局；而这些列表项中可能还嵌套有不同宽度的图标。

考虑在列表项的图标上声明类名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>