是否可以在响应模式下将列表更改为工具栏？

Question

我有以下卡。 nav 有许多项目（为了简洁起见，我在这里保留了一项）。

<div class="col-md-3">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">title</h3>
        </div>
        <div class="card-body p-0">
            <ul class="nav nav-pills flex-column">
                <li class="nav-item">
                    <NavLink href="javascript: void(0);" @onclick="() => ShowSearch()" class="nav-link">
                        <span class="fa-li pl-5"><i class="fas fa-search" /></span>
                        <span class="pl-4">Search</span>
                    </NavLink>
                </li>
            </ul>
        </div>
        <div class="card-footer">
            <NavLink href="Back" class="nav-link">
                <span class="fa-li pl-5"><i class="fas fa-arrow-alt-circle-left"/></span> 
                <span class="pl-1">Back</span>
            </NavLink>
        </div>
    </div>
</div>

即使在移动设备上，所有内容也能正确显示。

但是，我想知道是否可以将导航列表“转换”为某种工具栏（仍在卡体内）并显示彼此相邻的项目并仅显示其图标。像这样的事情：

可能吗？

Answer 1

Bootstrap 4 没有自己的图标支持， 但要实现这样的输出，请使用下面的小字体库。

1)