Estoy usando bootstrap vue con vue para codificar una tarjeta de 4 por 4. Actualmente, el título en una de las tarjetas está jugando con uno de los botones en la parte inferior de la tarjeta. El ancho de medios para el siguiente es alrededor de 1000 px

Consulte la imagen a continuación. ingrese la descripción de la imagen aquí

Sin embargo, cuando cambio el título a un título más corto, se alinea. Consulte la imagen a continuación.

enter image description here

Sé que tiene algo que ver con el ancho, pero parece que no puedo averiguar qué lo está causando.

Los pasos que he intentado para resolver el problema son el uso de flex grow en el padre y el ajuste de palabras para el título, pero todavía nada. Ojalá alguien pueda arrojar algo de luz.

Adjuntar es URL a la caja de arena de mi código. https://codesandbox.io/s/vue-cards-hx5c9

También adjuntaré mi código a continuación. gracias. Actualización: he actualizado mi familia de fuentes en mi caja de arena y luego se produce el problema

<template>
  <b-container fluid class="bv-example-row cards-row">
    <b-row cols="1" cols-sm="1" cols-md="1" cols-lg="4">
      <b-col class="desktop-col">
        <div>
          <b-card
            title="Stock & ETFs"
            img-src="https://picsum.photos/600/300/?image=25"
            img-alt="Image"
            img-bottom
            class="mb-2 h-100"
          >
            <b-card-text>
              0% commission means there’s no markup on stocks & ETFs – no matter
              how much you invest
            </b-card-text>

            <div class="cta_wrap">
              <div class="row">
                <a variant="primary" href="#">Learn More</a>
              </div>
              <div class="row mt-2">
                <b-button href="#" variant="primary">Invest in Stocks</b-button>
              </div>
            </div>
          </b-card>
        </div>
      </b-col>
      <b-col class="desktop-col">
        <div>
          <b-card
            title="Cryptocurrencies"
            img-src="https://picsum.photos/600/300/?image=25"
            img-alt="Image"
            img-bottom
            class="mb-2 h-100"
          >
            <b-card-text>
              Buy, sell and store Bitcoin and other leading cryptos with ease
            </b-card-text>

            <div class="cta_wrap">
              <div class="row">
                <a variant="primary" href="#">Learn More</a>
              </div>
              <div class="row mt-2">
                <b-button href="#" variant="primary"
                  >Buy Cryptocurrencies</b-button
                >
              </div>
            </div>
          </b-card>
        </div>
      </b-col>
      <b-col class="desktop-col">
        <div>
          <b-card
            title="CFD Trading"
            img-src="https://picsum.photos/600/300/?image=25"
            img-alt="Image"
            img-bottom
            class="mb-2 h-100"
          >
            <b-card-text>
              Go long or short on FX from just 1 pip. Trade commodities and
              indices with flexible leverage
            </b-card-text>

            <div class="cta_wrap">
              <div class="row">
                <a variant="primary" href="#">Learn More</a>
              </div>
              <div class="row mt-2">
                <b-button href="#" variant="primary">Trade Now</b-button>
              </div>
            </div>
          </b-card>
        </div>
      </b-col>
      <b-col class="desktop-col">
        <div>
          <b-card
            title="Forex"
            img-src="https://picsum.photos/600/300/?image=25"
            img-alt="Image"
            img-bottom
            class="mb-2 h-100"
          >
            <b-card-text>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim nam
              qui illum. Ipsa aliquam quas magnam est perferendis a, repellendus
              unde, nemo expedita doloremque suscipit ut dolore consequuntur
              amet vero!
            </b-card-text>

            <div class="cta_wrap">
              <div class="row">
                <a variant="primary" href="#">Learn More</a>
              </div>
              <div class="row mt-2">
                <b-button href="#" variant="primary">Buy Forex</b-button>
              </div>
            </div>
          </b-card>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>
export default {
  name: "Content",
  data() {
    return {};
  },
};
</script>
<style scoped>
.cards-row {
  position: relative;
  bottom: 50px;
}

.card-text {
  min-height: auto;
  flex-grow: 1;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.cta_wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

@media screen and (max-width: 992px) {
  .cta_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (min-width: 992px) {
  .desktop-col {
    display: flex;
    justify-content: center;
  }
}
</style>
1
desh 12 mar. 2021 a las 16:38

1 respuesta

La mejor respuesta

Creo que el problema es el tamaño de la imagen. Para controlar eso, podemos darle un estilo max-height: 112px a la tarjeta-img. Pero tenemos que darle un tamaño superior a 991px. Para que podamos proteger nuestros tamaños de imagen cuando flex-direction vuelva a columna . Aquí lo que he agregado a tu estilo;

@media screen and (min-width: 992px) {
  .card-img,
  .card-img-top,
  .card-img-bottom {
    max-height: 112px !important;
  }
}

 
1
ates_irem 14 mar. 2021 a las 07:35