如何用django_bootstrap实现电影与电视内容左右并排展示？

直接利用Bootstrap的网格系统就能实现左右分栏布局，不需要额外CSS。修改思路是把电影和电视内容放在同一个row下的两个列（col）中，具体代码如下：

<div class="container mt-4">
  <div class="row">
    <!-- 左侧：电影内容 -->
    <div class="col-md-6">
      <h1>电影评分榜</h1>
      <div class="row row-cols-1 row-cols-md-2 g-4">
        {% for m in movie %}
        <div class="col">
          <div class="card h-100">
            <img src="https://image.tmdb.org/t/p/w200{{ m.poster_path }}" class="card-img-top" alt="{{ m.title|default:m.name }}">
            <div class="card-body">
              <h5 class="card-title">{{ m.title|default:m.name }}</h5>
              <p class="card-text">{{ m.overview|truncatechars:100 }}</p>
              <a href="/movie/{{ m.id }}/" class="btn btn-primary">查看详情</a>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- 右侧：电视内容 -->
    <div class="col-md-6">
      <h1>电视节目评分榜</h1>
      <div class="row row-cols-1 row-cols-md-2 g-4">
        {% for m in tv %}
        <div class="col">
          <div class="card h-100">
            <img src="https://image.tmdb.org/t/p/w200{{ m.poster_path }}" class="card-img-top" alt="{{ m.name|default:m.title }}">
            <div class="card-body">
              <h5 class="card-title">{{ m.name|default:m.title }}</h5>
              <p class="card-text">{{ m.overview|truncatechars:100 }}</p>
              <a href="/tv/{{ m.id }}/" class="btn btn-primary">查看详情</a>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

关键修改点说明： #

• 外层结构：用container包裹内容，保证页面有合适边距；最外层row承载左右两栏。
• 分栏设置：col-md-6表示中等屏幕（≥768px）及以上时，左右栏各占50%宽度；小屏幕下两栏自动堆叠，适配移动端。
• 卡片布局优化：row-cols-1 row-cols-md-2实现小屏幕每行1张卡片、中等屏幕每行2张；g-4控制卡片间距，h-100让卡片高度统一。
• 模板语法精简：用|default过滤器替代if判断，|truncatechars限制简介长度，避免卡片高度差异过大。

内容的提问来源于stack exchange，提问作者user19553515