我想让第一行之后的列与col-md-6的高度相等，即使有动态内容(转到整页(。
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-xs-3">
<div class="row">
<div class="col-md-6">
<div class="shadow p-3 mb-5 bg-white rounded">
<div class="container">
<div class="row">
<div class="col-md-6">
-Icon-
</div>
<div class="col-md-6">
<p>Date</p>
</div>
</div>
</div>
<p>Author</p>
<div class="row">
<div class="col-md-6">
<p>Time</p>
</div>
<div class="col-md-6">
<div>
</div>
</div>
<!-- This needs to get the latest unread message -->
<!-- {% if unreadMessagesCount %}
<p>Unread: {{unreadMessagesCount}}</p>
{% if inbox %}
<div>
<p>{{inbox.first.sender}}</p>
</div>
<div>
<div>
<p>{{inbox.first.subject}}</p>
</div>
</div>
{{inbox.first.text}}
{{inbox.first.time}}
{% endif %}
{% else %}
<p>Unread: 0</p>
<div>
<p>There are no senders</p>
</div>
{% endif %} -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="shadow p-3 mb-5 bg-white rounded">
<div class="container">
<div class="row">
<div class="col-md-6">
-Icon-
</div>
<div class="col-md-6">
More stuff than possible
<!-- {% if request.user.refresh_token != "" %}
<div>
There are maybe some
</div>
{% else %}
<div>
There are no calendar events
</div>
{% endif %} -->
</div>
</div>
</div>
<p>Author</p>
<div class="row">
<div class="col-md-6">
<p>Time</p>
</div>
<div class="col-md-6">
<div>
</div>
</div>
</div>
</div>
</div>
<!-- This needs to get the earliest calendar event -->
</div>
</div>
</body>
</html>将h-100或height: 100%;添加到两列的col-md-6列起始的第一个子项。
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-xs-3">
<div class="row">
<div class="col-md-6">
<div class="shadow p-3 mb-5 bg-white rounded h-100">
<div class="container">
<div class="row">
<div class="col-md-6">
-Icon-
</div>
<div class="col-md-6">
<p>Date</p>
</div>
</div>
</div>
<p>Author</p>
<div class="row">
<div class="col-md-6">
<p>Time</p>
</div>
<div class="col-md-6">
<div>
</div>
</div>
<!-- This needs to get the latest unread message -->
<!-- {% if unreadMessagesCount %}
<p>Unread: {{unreadMessagesCount}}</p>
{% if inbox %}
<div>
<p>{{inbox.first.sender}}</p>
</div>
<div>
<div>
<p>{{inbox.first.subject}}</p>
</div>
</div>
{{inbox.first.text}}
{{inbox.first.time}}
{% endif %}
{% else %}
<p>Unread: 0</p>
<div>
<p>There are no senders</p>
</div>
{% endif %} -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="shadow p-3 mb-5 bg-white rounded h-100">
<div class="container">
<div class="row">
<div class="col-md-6">
-Icon-
</div>
<div class="col-md-6">
More stuff than possible
<!-- {% if request.user.refresh_token != "" %}
<div>
There are maybe some
</div>
{% else %}
<div>
There are no calendar events
</div>
{% endif %} -->
</div>
</div>
</div>
<p>Author</p>
<div class="row">
<div class="col-md-6">
<p>Time</p>
</div>
<div class="col-md-6">
<div>
</div>
</div>
</div>
</div>
</div>
<!-- This needs to get the earliest calendar event -->
</div>
</div>
</body>
</html>