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

Question

我正在构建一个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)。有没有办法让所有行的高度都一样？

Answer 1

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

1. row.row-eq-height应该是row row-eq-height (没有句点(.)，并且classnames.
2. Bootstrap之间的空格不允许col和row在同一个<div>中。您应该能够从第一个<div>中删除col-lg-12。看起来你有太多的闭合</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。

Answer 2

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