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的解决方案，如果可能的话，这将保持根据屏幕宽度将面板放置在不同数量的列中的响应行为。我们考虑了几种解决方案，但它们都不是特别好：

• 在每个面板上应用最小高度 - 难度是最小高度没有明显的价值，我们最终会得到一个很高的值，导致面板内部浪费很多空间，或者是一个低值，不会出现这种情况。 ; t完全解决了这个问题。
• 将网格布局的定义移动到我们的视图代码中（创建事件的2D数组），然后将每一行包装在<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;。

Answer 2

另一种方法是使用CSS3列宽..

http://www.bootply.com/123350

而且，这是一个使用Bootstrap和Masonry插件的工作示例...

http://www.bootply.com/123353