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

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

row.row-eq-height应该是row row-eq-height（没有句点（.）和类名之间的空格。
Bootstrap不允许col和row位于同一<div>。您应该可以从第一个col-lg-12中删除<div>。
看起来你有太多的结尾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＆gt; row＆gt; col。

请注意： row-eq-height正在利用does not work in IE9及更低版本的flexbox。

Answer 2

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

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

2 个答案: