为什么右列会断裂并位于引导行中左列的下方？

Question

我有一个连续显示两列的门户 在列的顶部，它们显示正确，但是当我向下滚动时，左列会中断并在左列数据结束的位置继续，并且还会破坏列布局。

这种情况并不总是发生，有时两列都正确渲染，有时它在左列末尾附近中断，有时不像本示例中那样。

我怀疑这与数据有关，但我不知道可能是什么

这是顶部

这就是它破裂的地方

这就是它在底部继续的地方

这是两列的代码，由 Python Flask 渲染

<div class="ms-5 me-5">
        <div class="row">
            <div class="col-6">
                {% for project in matched_projects %}
                    <div class="mt-5 {{ project.matching_score }}">
                        {% if project.budget_min <= 10 %}
                            <div style="background-color: #f6f1f131;">
                        {% else %}
                            {% if project.budget_min <= 30 %}
                                <div style="background-color: #ffff0020;">
                            {% else %}
                                {% if project.budget_min <= 250 %}
                                    <div style="background-color: #00ff2620;">
                                {% else %}
                                    {% if project.budget_min > 250 %}
                                        <div style="background-color: #ff190020;">
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                        {% endif %}

                            <div class="p-3">
                                <div class="row">
                                    <div class="col text-break"><h4><strong>{{ project.title }}</strong></h4></div>
                                    <div class="col-2 text-end">{{ project.bid_stats_bid_count }} bids</div>
                                    <div class="col-2 text-end submitdate">{{ project.elapsed_time }}</div>
                                </div>

                                <div class="row">
                                    <div class="col">Budget {{ project.budget_min }} - {{ project.budget_max }} - {{ project.currency_code }}</div>
                                    <div class="col text-end"><strong>{{ project.match_percentage }}%</strong></div>
                                </div>
                                {% if project.currency_not_usd %}
                                    <div class="row">
                                        <div class="col">Budget in USD: {{ project.converted_min_usd }} - {{ project.converted_max_usd }}</div>
                                    </div>
                                {% endif %}

                                <div class="row">
                                    <div class="col mb-3"><strong>Keywords: {{ project.keywords }}</strong></div>
                                </div>

                                <div class="row">
                                    <div class="col text-break word-break table-text mb-4 ms-3 me-3"  style="white-space: pre-wrap;">{{ project.description }}</div>
                                </div>

                                <div class="row">
                                    <div class="col">
                                        <a href="https://www.freelancer.com/projects/{{ project.seo_url }}" target="_blank">https://www.freelancer.com/projects/{{ project.seo_url }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            <div class="col">
                {% if unmatched_projects %}
                    {% for project in unmatched_projects %}
                        <div class="mt-5">
                            {% if project.budget_min <= 10 %}
                                <div style="background-color: #0084ff20;">
                            {% else %}
                                {% if project.budget_min <= 30 %}
                                    <div style="background-color: #ffff0020;">
                                {% else %}
                                    {% if project.budget_min <= 250 %}
                                        <div style="background-color: #00ff2620;">
                                    {% else %}
                                        {% if project.budget_min >= 750 %}
                                            <div style="background-color: #ff190020;">
                                        {% endif %}
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                                <div class="p-3">
                                    <div class="row">
                                        <div class="col"><h4><strong>{{ project.title }}</strong></h4></div>
                                        <div class="col-2 text-end">{{ project.bid_stats_bid_count }} bids</div>
                                        <div class="col-2 text-end submitdate">{{ project.elapsed_time }}</div>
                                    </div>

                                    <div class="row">
                                        <div class="col">Budget {{ project.budget_min }} - {{ project.budget_max }} - {{ project.currency_country }}</div>
                                    </div>

                                    {% if project.currency_not_usd %}
                                        <div class="row">
                                            <div class="col">Budget in USD: {{ project.converted_min_usd }} - {{ project.converted_max_usd }}</div>
                                        </div>
                                    {% endif %}

                                    <div class="row">
                                        <div class="col mb-3"><strong>Unmatched</strong></div>
                                    </div>

                                    <div class="row">
                                        <div class="col text-break mb-4 ms-3 me-3"  style="white-space: pre-wrap;">{{ project.description }}</div>
                                    </div>

                                    <div class="row">
                                        <div class="col">
                                            <a href="https://www.freelancer.com/projects/{{ project.seo_url }}" target="_blank">https://www.freelancer.com/projects/{{ project.seo_url }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>

Answer 1

unmatched_projects

的 if-else 条件包含逻辑错误。因此，div 元素并不总是被创建，并且列也不受尊重。

与

matched_projects

不同，最低预算的取值范围为251< 749 is omitted. This can result from a typo, but causes the error to occur because no else condition is defined for the value range.

我还建议使用

elif

而不是嵌套各种 if 条件。

{% if project.budget_min <= 10 %}
    <div style="background-color: #0084ff20;">
{% elif project.budget_min <= 30 %}
    <div style="background-color: #ffff0020;">
{% elif project.budget_min <= 250 %}
    <div style="background-color: #00ff2620;">
{% elif project.budget_min >= 750 %} {# <-- Maybe you mean > 250?! #}
    <div style="background-color: #ff190020;">
{% else %}
    <div> {# <-- If you actually meant >= 750, you need an else block. #}
{% endif %}