2

quisiera poner esos a href (que hacen de botones) al final del div padre (en el bottom) pero lo que pasa es que se ponen justo donde termina el parrafo de arriba, que pasa ?, que a veces en uno es mas largo que otro parrafo y queda cojo los botones.

  <div class="col-lg-3 col-md-3 border rounded  m-1 py-2" v-for="(model,index) in data_user.models" :key="index">
                    <h3 class="text-center">{{model.title}}</h3>
                    <p class="text-center">{{model.description}}</p>
                    <!-- Estos botones (inicio) -->
                            <a :href="'/model/'+model.id" class="btn btn-primary btn-sm" :class="[sending ? 'disabled' : '']">Ver</a>
                            <a  @click="deleteModel(model.id,index)" class="btn btn-danger btn-sm" :class="[sending ? 'disabled' : '']">Borrar</a>
                    <!-- Estos botones (fin) -->
    
    
                </div>

Imagen :

introducir la descripción de la imagen aquí

1
  • Intenta dandole estos estilos a tus botones -> position: absolute; bottom: 0;
    – Javier
    Commented el 4 dic. 2020 a las 0:40

2 respuestas 2

1

Tus botones son elementos en línea que originalmente se alinearán uno a lado del otro de manera horizontal, considero que lo mas simple es:

  • Moverlos a un contenedor de tipo bloque
  • Aplicar un text-align con un valor de center para desplazar estos 2 botones dentro de su contenedor

Ahora a nivel de Bootstrap queda con aplicarle a dicho contenedor la clase text-center mas o menos así:

<div class="text-center">
<!-- Estos botones (inicio) -->
  <a :href="'/model/'+model.id" class="btn btn-primary btn-sm" :class="[sending ? 'disabled' : '']">Ver</a>
  <a  @click="deleteModel(model.id,index)" class="btn btn-danger btn-sm" :class="[sending ? 'disabled' : '']">Borrar</a>
<!-- Estos botones (fin) -->
</div> 

Edición

Podemos asegurar que los botones se mantengan al fondo se hacemos:

  • Al div contenedor le damos un display con un valor de flex
  • Establecemos un direccionamiento vertical, para que las cajas flexibles queden una encima de la otra
  • Damos un espacio entre los elementos o cajas flexibles
  • Seguimos manteniendo a los botones dentro de un contenedor de bloque como propongo al inicio de mi respuesta

Código:

<style>
  /*
      Este CSS es solo para ejemplificar el código propuesto
  */
  .container{
    border: 1px solid;
    height: 200px;
  }
</style>
<link rel="stylesheet" href="url_de_bootstrap">

<div class="container d-flex flex-column justify-content-between">
  <h3 class="text-center">Titulo principal</h3>
  <p class="text-center">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae nobis corporis magnam.
  </p>
  <div class="text-center">
    <a class="btn btn-primary btn-sm">Ver</a>
    <a class="btn btn-danger btn-sm">Borrar</a>
  </div>
</div>
3
  • No lo arregla, mira que cuando un titulo o algo llega a 2 lineas fastidia todo. @BetaM
    – josanangel
    Commented el 4 dic. 2020 a las 0:26
  • hecho @josanangel edité con una propuesta
    – user128299
    Commented el 4 dic. 2020 a las 0:48
  • Tampoco lo soluciona, por ahoa lo que convertido en una lsita para quitarme de problemas, ya vere en adelante. no obstante muchas gracias.
    – josanangel
    Commented el 4 dic. 2020 a las 13:48
0

Se puede solucionar añadiendo una posición relativa position-relative al col y una posición absoluta position-absolute a los botones con la instrucción de que se fijen a la parte de abajo fixed-bottom, estas últimas dos solamente hay que añadirlas en las tarjetas más pequeñas junto con un margen inferior mb-5 en la ultima línea de texto (etiqueta p) para evitar que los botones se coloquen encima del mismo en caso de que todas las tarjetas sean pequeñas y ninguna le de la altura suficiente para que esto no ocurra.

Así se vería:

introducir la descripción de la imagen aquí

Este es el código:

<div class="row">
    <div class="col-lg-3 col-md-3 border rounderd m-1 py-2 position-relative text-center">
        <h3>Título</h3>
        <p class="mb-5">Descripción</p>
        <div class="position-absolute fixed-bottom mb-2">
            <a href="#" class="btn btn-primary btn-sm">Ver</a>
            <a href="#" class="btn btn-danger btn-sm">Borrar</a>
        </div><!--//buttons-->
    </div><!--//col-->
    <div class="col-lg-3 col-md-3 border rounderd m-1 py-2 text-center">
        <h3>Título</h3>
        <p>Descripción un poco más larga que ocupa dos renglones</p>
        <div class="position-absolute fixed-bottom mb-2">
            <a href="#" class="btn btn-primary btn-sm">Ver</a>
            <a href="#" class="btn btn-danger btn-sm">Borrar</a>
        </div><!--//buttons-->
    </div><!--//col-->
    <div class="col-lg-3 col-md-3 border rounderd m-1 py-2 text-center">
        <h3>Título muy grande de dos renglones</h3>
        <p>Descripción</p>
            <a href="#" class="btn btn-primary btn-sm">Ver</a>
            <a href="#" class="btn btn-danger btn-sm">Borrar</a>
    </div><!--//col-->
</div><!--//row-->

Como puedes ver los botones de la tercera tarjeta no están dentro de un div porque esta es la que le da la altura máxima a las demás tarjetas, solo la tarjeta más grande es la que no debe ser modificada con lo aquí expuesto. Si puedes prevenir cual será la tarjeta más alta de todas (ej: contando los caracteres que componen el título o descripción) y no aplicarle a ella estas modificas tu código funcionará como quieres.

También te recomiendo poner la clase text-center en el col como se ve en mi ejemplo para que afecte todo y no sea necesario repetirlo en cada uno de los componentes internos del mismo como en tu código.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.