我有以下index.html页面，利用Django模板:
{% extends "layout.html" %}
{% block body %}
{% for entry in entries %}
<div class="card h-100 mb-3" style="max-width: 540px;">
<a href="{% url 'entry' entry.id %}">
<img class="card-img-top" src="{{ entry.image.url }}" alt="{{ entry.title }}">
</a>
<div class="card-body">
<h5 class="card-title">{{ entry.title }}</h5>
<p class="card-text">{{ entry.description }}</p>
{% endif %}
</div>
</div>
{% empty %}
No content found.
{% endfor %}
{% endblock %}
目前，Bootstrap卡片呈现在单列(一个在另一个上面)，它们是左对齐的。
让两张卡并排呈现的最佳方式是什么(如果屏幕变窄，它会变成一列)?
提前感谢!
我不熟悉Django，但我建议把这些卡片放在一个bootstrap容器中，它有列和行。请参阅下面的文档:
https://getbootstrap.com/docs/4.0/layout/grid/
可以放置类来调整断点。我将使用引导带类，如w-100和vh-100，如果你想这些卡占用所有的屏幕空间后，你达到你想要的断点。
我给你做了一个快速的例子来测试代码笔:
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid bg-danger">
<div class="row bg-warning">
<div class="col-6 col-sm-12">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-6 col-sm-12">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
<div class="container-fluid bg-danger">
</div>