Quiero alinear mi menú desplegable (en respuesta) en el lado derecho de la página mientras mantengo el botón "Crear evento" a la izquierda. Los documentos piden agregar .dropdown-menu-end a la clase ul, que no funcionó, así que lo agregué a cada clase para mi menú desplegable y todavía no tuve suerte.
¿Qué está pasando con mi código?
<head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"> </head> <body> <div> <a class="btn btn-primary mb-2" href="/events/new">Create event</a> <span class="dropdown dropdown-menu-end"> <a class="btn btn-outline-primary dropdown-toggle bi bi-filter mb-2 dropdown-menu-end" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> Events </a> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink"> <li><a class="dropdown-item" href="/events">All Events</a></li> <li><a class="dropdown-item" href="/events/?future=true">Upcoming Events</a></li> <li><a class="dropdown-item" href="/events/?past=true">Past Events</a></li> </ul> </span> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body>Puede usar las utilidades flexibles de Bootstrap para justificar los botones con espacio entre ellos. Agregué d-flex y justify-content-between el elemento principal.
La razón por la que su enfoque no funcionó es porque esa documentación se refiere a la alineación desplegable con respecto al botón, no al botón con respecto a la página (o elemento principal).
También he convertido su lapso circundante en un div. Los intervalos generalmente se asocian con contenido en línea. Por lo menos, hace que su marcado sea más intuitivo para el lector. También hace que el formato automático del código sea un poco más limpio. Compara tu fragmento con el mío: utilicé el botón Ordenar en ambos.
<head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"> </head> <body> <div class="d-flex justify-content-between"> <a class="btn btn-primary mb-2" href="/events/new">Create event</a> <div class="dropdown dropdown-menu-end"> <a class="btn btn-outline-primary dropdown-toggle bi bi-filter mb-2 dropdown-menu-end" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> Events </a> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink"> <li><a class="dropdown-item" href="/events">All Events</a></li> <li><a class="dropdown-item" href="/events/?future=true">Upcoming Events</a></li> <li><a class="dropdown-item" href="/events/?past=true">Past Events</a></li> </ul> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body>