Discussion :

[kheironn]

Bonjour, ma question concerne plus bootstrap 5 que .Net.
J'ai créé une razor page avec un bouton (link) qui doit ouvrir un menu. Il s'agit d'un ellipsis pour gagner de la place et ne pas afficher tout un tas de boutond.
Je viens de passer mon appli de bootstrap 4 => 5. sur BS 4, pas de problème, tout marche correctement.
Je précise que ma navbar contient aussi un bouton de ce genre (ça marchait en BS4)

Quelqu'un aurait-il une idée de pourquoi celà ne fonctionne pas ?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
    <div class="dropdown justify-content-end">
        <a class="btn btn-sm rounded-circle btn-primary text-white-50" asp-area="" asp-page="#" title="Plus d'actions" data-bs-toggle="dropdown">
            <i class="fa-solid fa-ellipsis-vertical"></i>
        </a>
 
        <div class="dropdown-menu dropdown-menu-end border-primary bg-white-75 ">
            <div class="d-flex flex-wrap justify-content-around px-2">
                <a class="dropdown-item keep-bg-primary border border-primary btn btn-sm rounded-circle btn-primary text-white-50" asp-area="" asp-page="/Topics/Index" title="Retour à l'index">
                    <i class="fa-solid fa-reply"></i>
                </a>
            </div>
        </div>
    </div>

[BRUNO71]

Bonjour,

As-tu essayé avec ceci dans le head :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Est-ce que ça fonctionne ?

Sinon aussi :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Action
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

Visible ici : bootstrap