Question

我正在使用引导面板在我的网页上渲染一些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个但是随机一点。我想解决方案是将每个三和组合分开来。＃34; .row＆＃34;这将是一个正确的解决方案吗？但是，这将尝试计算是否将forloop.counter除以3并且我不喜欢做＆＃34;计算＆＃34;在模板上，因为它仅用于呈现数据。有没有更好的方法来实现我想要的目标？

Answer 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 %}

Answer 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

bootstrap col-md与不同高度的面板

2 个答案: