响应式模式下能否将导航列表转换为仅显示图标横向工具栏？

基于你用的Bootstrap框架，只需要调整几个类就能实现移动端横向工具栏仅显示图标的效果：

核心改动点 #

• 用Bootstrap响应式flex类控制导航排列方向：移动端横向，桌面端保留原有纵向
• 给文字标签添加响应式隐藏类，让移动端仅显示图标
• 调整间距与对齐方式，让工具栏布局更协调

修改后的完整代码 #

<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">
            <!-- 响应式flex类：移动端横向排列+均匀分布，桌面端纵向排列 -->
            <ul class="nav nav-pills flex-row flex-md-column justify-content-around align-items-center">
                <li class="nav-item">
                    <NavLink href="javascript: void(0);" @onclick="() => ShowSearch()" class="nav-link p-2">
                        <!-- 调整图标容器样式，让图标居中显示 -->
                        <span class="fa-li text-center"><i class="fas fa-search" /></span>
                        <!-- 响应式显示类：桌面端显示文字，移动端隐藏 -->
                        <span class="pl-4 d-md-inline d-none">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>

效果说明 #

• 屏幕宽度＜768px（移动端）：导航项横向均匀排列，仅展示图标，文字自动隐藏
• 屏幕宽度≥768px（桌面端）：保持原有纵向布局，显示完整的图标+文字组合

内容的提问来源于stack exchange，提问作者Ivan-Mark Debono