Ist es möglich, eine Liste im Responsive-Modus in eine Symbolleiste umzuwandeln?

Question

Ich habe die folgenden Karten. nav Es gibt viele Projekte (ich habe der Kürze halber eines hier behalten).

<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>

Alle Inhalte werden auch auf Mobilgeräten korrekt angezeigt.

Allerdings würde ich gerne wissen, ob es möglich ist, die Navigationsliste in eine Art Symbolleiste (immer noch im Kartenkörper) „umzuwandeln“ und Elemente nebeneinander anzuzeigen und nur ihre Symbole anzuzeigen. Dinge wie diese:

Ist es möglich?

Answer 1

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

1)