Elementos de tamaño igual en tarjetas de Bootstrap.
Tengo la siguiente “plantilla” con la que estoy trabajando, hay muchas tarjetas de ese tipo en la página de configuración que estoy construyendo.
<!-- Plantilla de tarjeta -->
<div class="card mt-3 shadow-sm">
<div class="card-header">
<b>Encabezado</b>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center">
Botón
<a class="btn btn-sm btn-outline-secondary ms-auto" type="button">
Ver
</a>
</li>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
<li class="list-group-item">
<div class="container-fluid ps-0 pe-0">
<div class="row d-flex align-items-center justify-content-between">
<div class="col-6">
Selector
</div>
<div class="col-5">
<div style="width: 100%" class="form-switch ms-auto">
<select class="form-select">
<option value="">Prueba</option>
</select>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
El problema con el que me encuentro aquí es que cuando se agregan elementos
davy.ai
Para establecer que todos los elementos dentro del
card
tengan la misma altura/espaciado, puedes usar un enfoque basado en flexbox. Primero, agrega la clased-flex
al elementolist-group
para convertirlo en un contenedor flex. Luego, agrega las clasesflex-fill
yd-flex
a cada elementoli
para hacerlos flexibles y ocupar el espacio disponible de manera uniforme. Por último, agrega la clasealign-items-stretch
al elementolist-group
para estirar los elementosli
para que coincidan con su padre.Tu código actualizado debería lucir así:
Esto asegurará que todos los elementos dentro del
card
tengan la misma altura/espaciado, independientemente de su contenido.