Bootstrap 3响应面板布局与变化的高度 [英] Bootstrap 3 Responsive Panel Layout with Varying Heights

问题描述

我们正在尝试使用bootstrap 3面板来创建响应式网格布局，但是我们无法确定如何让它们以我们想要的方式显示。下面显示了我们到目前为止的示例：

生成布局的django / bootstrap代码（ indicents 每个列表项目显示一个 incident_panel.html ）：

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

问题是由不同高度的面板＃ 5，＃6和＃8，这意味着我们没有得到一个完整的行下面放置。理想情况下，我们希望布局执行这样的操作：

我们正在寻找一个基于CSS的解决方案，如果可能，这将保持放置面板与不同数量的列基于屏幕宽度。有几个我们已经考虑的解决方案，但是它们都不是特别好：

• 对每个面板应用最小高度 - 是最低高度没有合理的价值，我们最终会得到一个高值，造成面板内部浪费的空间很大，或者是一个低价值，不能完全解决这个问题。


• 将网格布局的定义移动到我们的视图代码中（创建二维数组事件），然后将每行包含在< div class =row-fluid> 元素。这是更优雅，但是为了保持响应的行为，我们将布局3个不同的网格，我们显示/隐藏基于屏幕宽度的页面。

您可以修复每个面板的高度，然后为它们添加一个滚动条。

CSS

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

HTML

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

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

UPDATE

使用 overflow-y：scroll; 将始终显示滚动条，即使内容完全适合面板。所以，如果你想添加一个滚动条只有那些内容不适合的面板，请使用 overflow-y：auto; 。

We are trying to use the bootstrap 3 panels to create a responsive grid layout, however we are unable to work out how to get them to display in the way that we want them. Below shows an example of what we have so far:

And the django/bootstrap code that generates the layout (indicents is simply a list of objects where we display one incident_panel.html per list item):

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

The problem is caused here by the varying heights of panels #5, #6 and #8, which means we don't get a complete row laid out below them. Ideally, we would want the layout to do something like this:

We are looking for a CSS based solution if possible, which will maintain the responsive behavior of laying the panels out with varying number of columns based on screen width. There are a couple of solutions we have considered, but neither of them are particularly good:

• Apply a minimum height to every panel - the difficulty is that there is no sensible value for minimum height, and we would either end up with a high value causing lots of wasted space inside panels, or a low value that wouldn't completely resolve this issue.
• Move the definition of the grid layout into our view code (create a 2D array of incidents) and then wrap each row in a <div class="row-fluid"> element. This is more elegant, however to maintain the responsive behavior we would have to layout 3 different grids on the page which we show/hide based on screen width.

解决方案

Here's my take on it:

You can fix every panel's height and then add a scroll bar to them. A scroll bar will automatically appear in those panels in which the content doesn't fit in their height.

CSS

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

HTML

Add the .mypanel class to your panel's body.

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

UPDATE

Using overflow-y: scroll; will always display a scroll bar even if the content fits completely in the panels. So, if you want to add a scroll bar to only those panels whose content doesn't fit in them, use overflow-y: auto; instead.

这篇关于Bootstrap 3响应面板布局与变化的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！