Почему мои изображения не в одном столбце? Что я здесь делаю не так?

Question

Я новичок в мире пользовательских интерфейсов, и мне интересно, что я здесь делаю не так. Я пытаюсь собрать все свои изображения в одну строку, но они повсюду, и мой текст тоже отображается неправильно.

соответствует. html

<div class="container ">
<h2>It's a match!</h2>
<div class = "row">

        <div class="col-4">

             <img src="{{ user.photo.url }}" width= "300" height= "300" object-fit = "cover" >

        </div>
        <div class="col-8">

             <img src="{% static 'images/matching_cupid.png' %}" width= "300" height= "300" object-fit = "cover" >

        <div class="col-12">

             <img src="{{ match.photo.url }}" width= "300" height= "300" object-fit = "cover" >

        </div>

</div>
<p>You and {{ match.username }} like each other!</p>
<p><a href="{% url 'dating_app:messages' user.id %}">Start messaging </a></p>
<br>
<p><a href="{% url 'dating_app:mingle' %}">Keep mingling!</a></p>

{% endblock%}

Answer 1

Используйте col-4 во всех классах вместо col-8 и col-12

Или, если вы используете bootstrap, тогда col-lg-4