为什么我的图像不在一列中?我在这里做错了什么

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