是否可以在回應模式下將清單變更為工具列？

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)