Bootstrap嵌套列等高行实现：Flask应用HTML模板3×3新闻布局问题

我来帮你搞定这个3×3瓷砖布局的问题！从你的代码片段来看，核心需求是让9个新闻瓷砖（3列×3行）保持一致的高度和宽度，咱们一步步来调整优化：

1. 修正HTML结构的语法错误 #

你原代码里的容器class写法有问题，row.row-eq-height是错误的命名方式，应该把row和row-eq-height作为两个独立的class。同时Bootstrap的布局要遵循「容器 → 行 → 列」的层级逻辑，不能直接把col-lg-12和row混在一起。修正后的主模板结构如下：

{% extends "base.html" %}

{% block app_content %}
<!-- 外层容器，可选container（固定宽度）或container-fluid（全屏宽度） -->
<div class="container">
  <!-- 行容器，row-eq-height确保行内所有列等高（Bootstrap3需手动添加，Bootstrap4+默认flex布局可省略） -->
  <div class="row row-eq-height">
    <!-- 第一列：前3条新闻 -->
    <div class="col-lg-4 mb-3">
      {% for result in results[:3] %}
        {% include '_result.html' %}
      {% endfor %}
    </div>
    <!-- 第二列：中间3条新闻 -->
    <div class="col-lg-4 mb-3">
      {% for result in results[3:6] %}
        {% include '_result.html' %}
      {% endfor %}
    </div>
    <!-- 第三列：最后3条新闻 -->
    <div class="col-lg-4 mb-3">
      {% for result in results[6:9] %}
        {% include '_result.html' %}
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}

2. 确保每个瓷砖内部元素完全等高 #

光靠行的等高设置还不够，你需要让_result.html里的每个新闻卡片占满父列的高度。假设你的_result.html是一个Bootstrap卡片组件，给它加上h-100类（Bootstrap4+专属类，代表height:100%），同时用flex布局让内容自动填充空间，示例如下：

<!-- _result.html 示例代码 -->
<div class="card h-100">
  <img src="{{ result.image_url }}" class="card-img-top" alt="{{ result.title }}">
  <div class="card-body d-flex flex-column">
    <h5 class="card-title">{{ result.title }}</h5>
    <!-- flex-grow-1让文本区域自动填充剩余空间，确保按钮位置统一 -->
    <p class="card-text flex-grow-1">{{ result.content }}</p>
    <a href="{{ result.link }}" class="btn btn-primary mt-auto">查看详情</a>
  </div>
</div>

3. 额外细节说明 #

• 如果你使用的是Bootstrap3，row-eq-height需要依赖flexbox支持，可能需要引入额外的兼容CSS；
• mb-3类是给列添加底部外边距，避免行与行的瓷砖紧贴在一起；
• 宽度上，col-lg-4已经确保大屏幕下每列占1/3宽度，刚好实现3列一排的布局，完美匹配3×3的需求。

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