Question

我正在尝试使用包含单独/动态Django模板包含的幻灯片制作基础6轨道：

<div class="row">
        <div class="small-12 columns">
            <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
                <ul class="orbit-container">
                    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> &#9664;&#xFE0E;</button>
                    <button class="orbit-next"><span class="show-for-sr">Next Slide</span> &#9654;&#xFE0E;</button>
                    {% for p in projects %}
                        <li class="orbit-slide">
                            {% include "project/project_landing_stub.html" %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

project_landing_stub.html：

<div class="callout small-12 columns" style="margin-top:30px;">
<a href="{{ p.get_absolute_url }}" style="color:black;">
    <div class="row" style="margin-bottom: 20px;">
        <div class="small-12 columns" style="border-bottom:1px solid lightgrey;">
            <p>{{ p.offer_title|truncatechars:100 }}</p>
        </div>
    </div>
    <div class="row">
        <div class="small-6 columns">
            <img class="thumbnail" src="{% if p.project.photo %}{{ p.project.photo.url }}{% endif %}"/>
        </div>
        <div class="small-6 columns">
            <i class="fa fa-map-marker"></i> {{ p.project.city }}, {{ p.project.country }}
        </div>
    </div>

    <div class="row" style="text-align: center;font-size: 12px;">
        {% if p.offer_type == 'CO' %}

            <div class="small-4 columns padding-10">
                {% if p.annual_return %}
                <b>{{ p.annual_return }}%</b><br/>
                {% else %}
                <b>-</b><br/>
                {% endif %}
                <span class="small-gray">total yield</span>
            </div>
            <div class="small-4 columns padding-10">
                <b>{{ p.time_horizon }} </b><br/>
                <span class="small-gray">tenure (mth)</span>
            </div>
            <div class="small-4 columns padding-10">
                <p style="font-size: 12px;">
                    {% if p.loan %}
                        <b>{{ p.loan.get_payment_freq_display }}</b>
                    {% else %}
                        <b>End of Tenure</b>
                    {% endif %}
                    <br/>
                    <span class="small-gray">payout freq</span>
                </p>
            </div>
        {% else %}
            <div class="small-6 columns padding-10">
                <b>{{ p.currency }} {{ p.min_investment }} </b><br/>
                <span class="small-gray">min. investment</span>
            </div>
            <div class="small-6 columns padding-10">
                {% if p.annual_return %}
                <b>{{ p.annual_return }}%</b><br/>
                {% else %}
                <b>-</b><br/>
                {% endif %}
                <span class="small-gray">projected return</span>
            </div>

        {% endif %}
    </div>

</a>
</div>

但它没有显示，因为轨道容器被渲染为0px height属性。 2016年7月18日下载了Complete Foundation，并在此处使用。如果粘贴在同一页面上，Orbit样本工作正常，所以我认为这与使用Django循环动态生成轨道幻灯片有关。有什么想法吗？

基金会6轨道无法在Django模板中工作

0 个答案: