在嵌套列中获取等高的行 HTML Bootstrap答案

【问题标题】：Getting rows of equal height in nested columns HTML Bootstrap在嵌套列中获取等高的行 HTML Bootstrap
【发布时间】：2018-03-19 17:51:09
【问题描述】：

我正在构建一个 Flask 应用程序，但其中一个 HTML 模板遇到了一些问题。我想要做的是一种用于新闻报道的 3x3 平铺布局，所有平铺的高度和宽度都相同。这是我的html代码：

{% extends "base.html" %}

{% block app_content %}

<div class = "col-lg-12 row.row-eq-height text-left">
    <div class = "col-lg-4">
      {% for result in results[:3] %}
        {% include '_result.html' %}
      {%endfor %}
      </div>
    <div class = "col-lg-4">
      {% for result in results[3:6] %}
        {% include '_result.html' %}
      {%endfor %}
    </div>
    <div class = "col-lg-4">
      {% for result in results[6:9] %}
        {% include '_result.html' %}
      {%endfor %}
    </div>
    </div>
  </div>
</div>
{% endblock %}

问题是我得到了三个大小均匀的漂亮列，但行的高度不相等。我的猜测是它与嵌套列（具有 col-lg-12 和 col-lg-4）有关。有什么办法让所有行的高度都一样？

【问题讨论】：

标签： html css flask twitter-bootstrap-3 jinja2

【解决方案1】：

看起来您的标记中可能存在一些错误：

row.row-eq-height 应该是 row row-eq-height（没有句点 (.) 和空格在类名之间。
Bootstrap 不允许col 和row 在同一个<div> 中。您应该能够从您的第一个 <div> 中删除 col-lg-12。
您的关闭 div 似乎太多 </div>。

最终代码为：

<div class="row row-eq-height text-left">
  <div class="col-lg-4">
    {% for result in results[:3] %}
      {% include '_result.html' %}
    {%endfor %}
  </div>
  <div class="col-lg-4">
    {% for result in results[3:6] %}
      {% include '_result.html' %}
    {%endfor %}
  </div>
  <div class="col-lg-4">
    {% for result in results[6:9] %}
      {% include '_result.html' %}
    {%endfor %}
  </div>
</div>

更多信息： 请务必查看Bootstrap's grid documentation 以获取有关如何构建标记的更多信息，但通常是container > row > col。

记住： row-eq-height 正在利用 does not work in IE9 及以下的 flexbox。

【讨论】：

感谢您的建议！我是 html/bootstrap 的新手，因此标记中的错误。但是，即使按照您的建议，我仍然得到相同的图片：Equal columns, but no equal height rows...我真的不知道为什么它不起作用...
@user5791200 你能发个链接吗？另外你知道你使用的是什么版本的 Bootstrap 吗？
我正在使用 Bootstrap 3。我现在找到了一个不使用 bootstrap 的解决方案，但我按照此处答案中概述的步骤找到了另一个解决方案：stackoverflow.com/questions/20456694/grid-of-responsive-squares。我只是无法让它与引导程序一起工作......而且我还没有链接，因为该应用程序尚未上线，仍在调试中......
您的样式中可能没有.row-eq-height 类。您可以尝试将 .row-eq-height { display: flex } 类添加到您的 css 中。

【解决方案2】：

如上所述，我在这里找到了一个不涉及引导程序的解决方案：stackoverflow.com/questions/20456694/grid-of-responsive-squares - 但如果有人仍然有一个全引导程序解决方案，那肯定会很有趣！我仍然不知道为什么它不起作用..

【讨论】：