如何根据设备大小在 jinja 模板中动态更改批处理参数

Question

我有下面的 bootstrap 面板，每行三个 col-xs-4 在 jinja 模板中呈现，在桌面上看起来非常漂亮。

但是当尝试使用更小的设备时，它会变得丑陋。所以我想知道是否有办法在特定设备大小下将批处理参数更改为每行 1 个？

或者也许有更好的方法，我很开放，因为我对此很陌生:)

<div class="container-fluid">
    {% for raceorganizers in res.keys() | batch(3, '&nbsp;') %}
        <div class="row">
            {% for raceorganizer in raceorganizers %}
                <div class="col-xs-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><a
                                    href="{{ raceorganizer.link }}">{{ raceorganizer.name }}</a><span
                                    class="text-right pull-right flag-icon flag-icon-{{ raceorganizer.country_code }}"></span>
                            </h3>


                        </div>
                        <div class="panel-body panel-image">
                            <img class="panel-image-preview"
                                 src="{{ url_for('static', filename='img/full/' + im ) }}" alt='{{ im }}'>
                        </div>
                        <div class="panel-footer">
                            {% for race in res[raceorganizer] %}
                                <ul class="list-unstyled">
                                    <li>
                                        <span class="glyphicon glyphicon-road"></span>
                                        <span class="badge">{{ '{:.1f}'.format(race.distance_number) }}</span>
                                        <span class="flaticon-mountain40"></span>
                                        <span class="badge">{{ '{:.0f}'.format(race.elevation_number) if race.elevation_number is not none else '-' }}</span>
                                    </li>
                                </ul>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endfor %}
</div>

Answer 1

如果您更仔细地查看 bootstrap 的 grid system，您可以完全摆脱 batch 调用。如果您在同一元素上玩不同层级的类（col-xs 适用于手机+，col-md 适用于台式机+），您将能够获得 bootstrap 将内容拆分为台式机上 3 列，小屏幕上 1 列。

如何根据设备大小在 jinja 模板中动态更改批处理参数

how to change batch argument dynamically in jinja template depending on device size

python

jinja2

flask

twitter-bootstrap