2

Estoy haciendo uso del Media Object de Boostrap 4 para un modulo de comentarios , he añadido un botón en él pero no se como puedo alinearlo horizontalmente de forma que se quede pegado al margen derecho.

El resultado deseado es el boton en esa posicion: introducir la descripción de la imagen aquí

.single-comment{
                border: 1px solid lightgray;
                padding: 15px;
                border-radius: 5px
            }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="media mb-4 single-comment"><img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
  <div class="media-body">
    <h5 class="mt-0">Padre1</h5>
    <p>padre1</p>
    
    <button type="button" class="btn btn-primary btn-sm align-self-end mt-4">Responder</button>
   
   <div class="media mt-4"><img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
      <div class="media-body">
        <h5 class="mt-0">Hijo</h5>
        <p>hijo</p>
      </div>
    </div>
  </div>
</div>

0

2 respuestas 2

3

Bueno una de las forma de realizar eso es haciendo que el comentario "hijo" tome todo el ancho del card con col-md-12 , y después hacer flotar el botón hacia la derecha con float-right el resultado sería el siguiente

.single-comment {
  border: 1px solid lightgray;
  padding: 15px;
  border-radius: 5px
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="media mb-4 single-comment">
  <img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
  <div class="media-body">
    <h5 class="mt-0">Padre1</h5>
    <p>padre1</p>

    <button type="button" class="btn btn-primary btn-sm float-right mt-4">
      Responder
    </button>

    <div class="media mt-4 col-md-12">
      <img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
      <div class="media-body">
        <h5 class="mt-0">Hijo</h5>
        <p>hijo</p>
      </div>
    </div>
  </div>
</div>

Espero te sirva.Saludos!.

2

Bootstrap 4 utiliza .float-right diferencia de .pull-right de Bootstrap 3.

Ejemplo:

<div class="row">
   <div class="col-lg-12">
      <button class="btn btn-secondary float-right">Responder</button>
   </div>
</div>
4
  • Gracias por la ayuda pero no me sirve .float-right , si bien es cierto que se queda al margen derecho el botón se queda a la altura del comentario hijo , y no del comentario padre. La dificultad es que el objeto Media es un flexbox y no consigo alinear los elementos dentro de el.
    – Serux
    el 6 jul. 2018 a las 13:45
  • Ya veo, puedes compartir una imagen del resultado deseado. el 6 jul. 2018 a las 13:48
  • He editado la pregunta y añadido una imagen con el resultado desseado
    – Serux
    el 6 jul. 2018 a las 13:57
  • jsfiddle.net/mariscal/10ogrLa8 el 6 jul. 2018 a las 14:13

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.