Es la primera vez que hago una pregunta. Disculpad si falta algún dato, aclaración o no me expreso bien.
Estoy aprendiendo a usar Bootstrap en su última versión (v5.0.0-beta3) y, siguiendo unos tutoriales, intento crear una caja de comentarios tipo red social, que salen los comentarios anidados. No entiendo por qué en mi código me aparece todo lineal, no se anida.
He buscado en la documentación de Bootstrap, he probado todo lo que se me ha ocurrido (dentro de lo poco que sé) y no he conseguido arreglarlo. He probado en dos navegadores distintos y tampoco se anida. Seguramente sea una tontería pero no me deja avanzar porque me deja intranquilo.
Muchas gracias.
body {
background-color: #f2f2f2;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 18px;
}
.comments {
margin: 20px 0px;
}
.form_comments textarea {
width: 100%;
height: 84px;
max-width: 100%;
min-width: 100%;
min-height: 84px;
max-height: 250px;
padding: 10px;
line-height: 30px;
border: 1px solid #4b65d1;
margin-bottom: 20px;
}
.form_comments .btn {
background-color: #4b65d1;
border-radius: 5px;
color: white;
margin-bottom: 20px;
}
.form_comments .btn:hover {
-webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.5);
}
.media {
border-top: 1px solid #bfbfbf;
padding-top: 20px;
}
.media img {
margin-right: 20px;
border-radius: 999px;
}
.media .name {
color: #4b65d1;
margin-bottom: 0;
}
.media .name span {
font-size: 14px;
color: #464646;
margin: 20px;
}
.media .comments {
margin-top: 10px;
}
.media .buttons {
margin-bottom: 10px;
}
.media .buttons a {
color: #acacac;
font-size: 14px;
font-weight: bold;
margin-left: 20px;
text-decoration: none;
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comentarios</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row comments justify-content-center">
<div class="col-8">
<form class="form_comments d-flex justify-content-end flex-wrap">
<textarea placeholder="Comentario"></textarea>
<button class="btn" type="button">Comentar</button>
</form>
<div class="media">
<img src="http://lorempixel.com/64/64" alt="Karina" class="d-flex align-self-center">
<div class="media-body">
<p class="name">Karina ST <span>11:56, hoy</span></p>
<p class="comment">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis eos dolore optio!
</p>
<div class="buttons text-end">
<a href="#">Responder</a>
<a href="#">Editar</a>
<a href="#">Eliminar</a>
</div>
<div class="media">
<img src="http://lorempixel.com/64/64" alt="Karina" class="d-flex align-self-center">
<div class="media-body">
<p class="name">Karina <span>22:56, hoy</span></p>
<p class="comment">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis eos dolore optio!
</p>
<div class="buttons text-end">
<a href="#">Responder</a>
<a href="#">Editar</a>
<a href="#">Eliminar</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
-->
</body>
</html>
<>
.