css - 具有不同高度的 Bootstrap 3 响应式面板布局

Question

我们正在尝试使用 bootstrap 3 面板来创建响应式网格布局，但是我们无法弄清楚如何让它们以我们想要的方式显示。下面显示了我们目前所拥有的示例:

以及生成布局的 django/bootstrap 代码(indicents 只是一个对象列表，我们在每个列表项中显示一个 incident_panel.html):

{% for incident in incidents %}
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
        {% include 'incident_panel.html' %}
    </div>
{% endfor %}

这里的问题是由面板 #5、#6 和 #8 的不同高度引起的，这意味着我们没有在它们下方布置完整的行。理想情况下，我们希望布局做这样的事情:

如果可能，我们正在寻找一种基于 CSS 的解决方案，它将保持根据屏幕宽度使用不同列数布置面板的响应行为。我们考虑了几个解决方案，但都不是特别好:

• 对每个面板应用最小高度 - 困难在于没有最小高度的合理值，我们要么以高值结束，导致面板内浪费大量空间，要么以低值结束，这不会彻底解决这个问题。
• 将网格布局的定义移动到我们的 View 代码中(创建事件的二维数组)，然后将每一行包装在 <div class="row-fluid"> 中元素。这更优雅，但是为了保持响应行为，我们必须在页面上布局 3 个不同的网格，我们根据屏幕宽度显示/隐藏这些网格。

Answer 1

这是我的看法:

您可以固定每个面板的高度，然后为其添加滚动条。滚动条将自动出现在那些内容不适合其高度的面板中。

CSS

.mypanel {
    height: 100px;
    overflow-y: scroll;
}

HTML

将 .mypanel 类添加到面板的正文中。

<div class="panel-body mypanel"> ... </div>

更新

使用 overflow-y: scroll; 将始终显示滚动条，即使内容完全适合面板也是如此。因此，如果您只想向内容不适合的那些面板添加滚动条，请改用 overflow-y: auto;。