Est-il possible de changer une liste en barre d'outils en mode responsive ?
P粉743288436
P粉743288436 2024-04-02 16:09:27
0
1
391

J'ai les cartes suivantes. nav Il existe de nombreux projets (j’en ai gardé un ici par souci de concision).

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

Tout le contenu s'affiche correctement même sur les appareils mobiles.

Cependant, j'aimerais savoir s'il est possible de "convertir" la liste de navigation en une sorte de barre d'outils (toujours dans le corps de la carte) et d'afficher les éléments les uns à côté des autres et d'afficher uniquement leurs icônes. Des choses comme ça :

Est-ce possible ?

P粉743288436
P粉743288436

répondre à tous(1)
P粉043295337

Bootstrap 4 n'a pas son propre support d'icônes, Mais pour obtenir un tel résultat, utilisez la petite bibliothèque de polices ci-dessous.

1)




Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal