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的解决方案,如果可能的话,这将保持根据屏幕宽度将不同数量的列铺设出来的响应行为.我们考虑过几种解决方案,但它们都不是特别好:

• 对每个面板应用最小高度 - 困难在于最小高度没有合理的价值,并且我们最终会导致高值导致面板内部浪费大量空间,或者低值无法完全解决这个问题问题.
• 将网格布局的定义移动到我们的视图代码中(创建事件的2D数组),然后将每行包装在一个<div class="row-fluid">元素中.这是更优雅的,但是要保持我们在页面上布局3个不同网格的响应行为,我们根据屏幕宽度显示/隐藏这些网格.

Answer 1

这是我的看法:

您可以修复每个面板的高度,然后为它们添加滚动条.滚动条将自动出现在内容不适合其高度的面板中.

CSS

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

HTML

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

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

UPDATE

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