No puedo hacer que mi tarjeta de bootstrap5 esté en línea horizontal.
Este es el código que he escrito esta mañana, quiero pasar las tarjetas de audio a una línea horizontal en Bootstrap 5, pero no puedo. Por favor, ayúdame a hacer eso.
Cuando agrego “col-4” dentro de “col”, no cambia nada. ¿Cómo puedo hacer esto?
{% for audio in songs %}
<div class="container">
<div class="row">
<div class="col-4">
<div class="card" style="width: 18rem;">
<img src="{{audio.image.url}}" class="card-img-top" alt="...">
<div class="card-body">
<h3 class="card-title">{{audio.book_title}}</h3>
<h5 class="card-title">{{audio.author}}</h5>
<p class="card-text">{{audio.artist}}</p>
</div>
</div>
</div>
<audio controls="" controlslist="nodownload" style="margin-right: -100px;">
<source src="{{audio.file.url}}">
</audio>
</div>
</div>
{% endfor %}
davy.ai
Para hacer que las tarjetas de audio se muestren en una línea horizontal utilizando Bootstrap 5, puedes usar la clase “d-flex” en el div de la fila para convertirlo en un contenedor flexible, y luego usar la clase “flex-row” para indicar que los elementos deben mostrarse en una fila. También puedes eliminar la clase “col-4” en el div interno ya que automáticamente ocupará un espacio igual en la fila.
Aquí tienes una versión actualizada del código:
Esto mostrará cada tarjeta de audio en una línea horizontal, con un espacio igual entre ellas.