es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Elementos de tamaño igual
  • en tarjetas de Bootstrap.

    • 01 Aug, 2023 Programación

    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

  • además de texto a la tarjeta, el espaciado cambia. ¿Cómo puedo establecer la misma altura/espaciado para todos estos elementos, sin necesidad de cambiar cientos de ellos individualmente? No estoy seguro de qué poner en mi página
    • Tags:  , , ,

    Answer

    1. Avatar for davy.ai
      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 clase d-flex al elemento list-group para convertirlo en un contenedor flex. Luego, agrega las clases flex-fill y d-flex a cada elemento li para hacerlos flexibles y ocupar el espacio disponible de manera uniforme. Por último, agrega la clase align-items-stretch al elemento list-group para estirar los elementos li para que coincidan con su padre.

      Tu código actualizado debería lucir así:

      <!-- Plantilla del card -->
<div class="card mt-3 shadow-sm">
  <div class="card-header">
    <b>Encabezado</b>
  </div>
  <ul class="list-group list-group-flush d-flex align-items-stretch">
    <li class="list-group-item d-flex justify-content-between align-items-center flex-fill">
      Botón
      <a class="btn btn-sm btn-outline-secondary ms-auto" type="button">
        Ver
      </a>
    </li>
    <li class="list-group-item flex-fill d-flex">
      ...
    </li>
    <li class="list-group-item flex-fill d-flex">
      ...
    </li>
    <li class="list-group-item flex-fill d-flex">
      ...
    </li>
    <li class="list-group-item flex-fill d-flex">
      <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>

      Esto asegurará que todos los elementos dentro del card tengan la misma altura/espaciado, independientemente de su contenido.

    Comments are closed.