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.

Alineación del texto en las tarjetas de React Card Bootstrap

27 Jul, 2023 Programación

Tengo el siguiente código para crear una cuadrícula de tarjetas, pero el botón de ENLACE en la parte inferior no está alineado en todas las tarjetas. ¿Qué necesito cambiar para que todos los botones de enlace estén alineados en la parte inferior derecha de todas las tarjetas? Por favor, vea la imagen al final, me gustaría que todos los botones de selección estén alineados horizontalmente con las otras tarjetas en la fila.

<row xs="{1}" md="{4}" classname="g-4">
   {MilitaryFormsType.map((e, idx) => (
     <col>
       <card border="#f7f7f7" style="{{" width:="" '18rem',="" height:="" '18rem',="" whitespace:="" 'pre-wrap'="" }}="">
            <card.body>
            <card.title>{e.name}</card.title>
            <card.text>{e.Description}</card.text>
             <link to="{e.link}">
             <button variant="primary" style="{{" backgroundcolor:="" "#aa92df",="" borderstyle:="" "none",="" float:="" "right"="" }}="">Select</button>

              </card.body>
   </card>

  ))}
</row>

enter image description here

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para alinear todos los botones de enlace en las tarjetas en la esquina inferior derecha, debes agregar una clase de CSS al botón de enlace y establecer su posición como absoluta. Esto asegurará que el botón de enlace se posicione en la esquina inferior derecha de cada tarjeta.

    Aquí está el código actualizado con la clase de CSS agregada al botón de enlace:

    <!-- language: lang-js -->

<row xs="{1}" md="{4}" classname="g-4">
  {MilitaryFormsType.map((e, idx) => (
    <col>
      <card border="#f7f7f7" style="{{" width:="" '18rem',="" height:="" '18rem',="" whitespace:="" 'pre-wrap'="" }}="">
        <card.body>
          <card.title>{e.name}</card.title>
          <card.text>{e.Description}</card.text>
          <link to="{e.link}" classname="link-button">
            <button variant="primary" style="{{" backgroundcolor:="" "#aa92df",="" borderstyle:="" "none"="" }}="">Select</button>

        </card.body>
      </card>

  ))}
</row>

<style>
.link-button {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>

    Esto asegurará que todos los botones de enlace estén alineados horizontalmente con las otras tarjetas en la fila, como se muestra en la siguiente imagen:

    botones de enlace alineados

Comments are closed.