带有不同高度面板的 bootstrap col-md答案

【问题标题】：bootstrap col-md with panels of different height带有不同高度面板的 bootstrap col-md
【发布时间】：2015-02-14 23:29:44
【问题描述】：

我正在使用引导面板在我的网页上呈现一些 django 对象。我希望他们在三点前出现。所以我创建了以下代码

<div class="row">
    {% for account in accounts %}
        <div class="col-md-4 col-lg-4 col-xs-4">
            <div class="panel panel-default">
                <!--panel with different body heights-->
            </div>
        <div>
    {% endfor %}
</div>

由于面板的高度不同，它们不会像我想要的那样显示，即每行 3 个，但有点随机。我想解决方案是将每个三元组放在单独的“.row”中是正确的解决方案吗？但这需要尝试计算 forloop.counter 是否除以 3 并且我不喜欢在模板上进行“计算”，因为它仅用于呈现数据。有没有更好的方法来实现我想要的？

【问题讨论】：

class="col-md-4 col-lg-4 col-xs-4" 可以简化为 class="col-xs-4" 。见github.com/twbs/bootlint/wiki/E029

标签： css django twitter-bootstrap

【解决方案1】：

除非您以包含 3 组的数组形式发送数据，否则您必须在模板中使用计算。

所以你可以像这样发送数据：

data[row1] = (col1, col2, col3)
data[row2] = (col4, col5, empty_obj)  # edit, added empty_obj to represent that you always need to make sure there are 3 items in the set or the template won't render correctly.
etc

然后在模板中就可以做

{% for row in data %}
<div class="rowstart">
    {% for col in row %}
    <div class="column">{{ col.data }}</div>
    {% endfor %}
</div>
{% endfor %}

或者干脆在你的forloop里面使用

{% if forloop.counter|divisibleby:3 or forloop.last %}
 <close row>
 {% if not forloop.last %}
 <open new row>
 {% endif %}
{% endfor %}

【讨论】：

【解决方案2】：

我开发了一个纯 CSS 解决方案。

.col-xs-6:nth-of-type(2n+3), 
.col-xs-4:nth-of-type(3n+4), 
.col-xs-3:nth-of-type(4n+5),
.col-xs-2:nth-of-type(6n+7), 
.col-xs-1:nth-of-type(12n+13) 
{
    clear: both;
}

@media (min-width: 768) {
    [class*="col-xs"][class*="col-sm"], 
    [class*="col-xs"][class*="col-md"], 
    [class*="col-xs"][class*="col-lg"] 
    {
        clear: none;
    }

    .col-sm-6:nth-of-type(2n+3), 
    .col-sm-4:nth-of-type(3n+4), 
    .col-sm-3:nth-of-type(4n+5), 
    .col-sm-2:nth-of-type(6n+7), 
    .col-sm-1:nth-of-type(12n+13) 
    {
        clear: both;
    }
}

@media (min-width: 992) {
    [class*="col-sm"][class*="col-md"], 
    [class*="col-sm"][class*="col-lg"] 
    {
        clear: none;
    }

    .col-md-6:nth-of-type(2n+3), 
    .col-md-4:nth-of-type(3n+4), 
    .col-md-3:nth-of-type(4n+5), 
    .col-md-2:nth-of-type(6n+7), 
    .col-md-1:nth-of-type(12n+13) 
    {
        clear: both;
    }
}

@media (min-width: 1200) {
    [class*="col-md"][class*="col-lg"] 
    {
        clear: none;
    }

    .col-lg-6:nth-of-type(2n+3), 
    .col-lg-4:nth-of-type(3n+4), 
    .col-lg-3:nth-of-type(4n+5), 
    .col-lg-2:nth-of-type(6n+7), 
    .col-lg-1:nth-of-type(12n+13) {
        clear: both;
    }
}

// use .col-nobreak class to deactivate this fix
.col-nobreak {
    clear: none !important;
}

在这里显示我的帖子：

https://stackoverflow.com/a/30037332/4863373

在 Codepen 上，我为这个问题创建了一支笔：

http://codepen.io/valentinpalkovic/pen/PqPzzB

【讨论】：