html 添加 django 模板标签后表现不同

Question

我的导航丸出现在一行中。但是一旦我向它添加 django 模板标签，药丸就会堆叠在一起。

我该如何解决才能使药丸排成一排？

没有 django 标签

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

使用 django 标签

{% for menu in menus %}
<ul class="nav nav-pills">
    {% if menu.mealtype == 'Breakfast' %}
        <li role="presentation" class="active"><a href="#">Home</a></li>
    {% endif %}
    {% if menu.mealtype == 'Lunch' %}
        <li role="presentation"><a href="#">Profile</a></li>
    {% endif %}
</ul>
{% endfor %}

Answer 1

您的问题是您的 for 循环 {% for menu in menus %} 也重复了 <ul> 标记。您正在为每个条目制作一个单独的列表。

尝试将 for 循环移动到 <ul> 标签内。

<ul class="nav nav-pills">
{% for menu in menus %}
    {% if menu.mealtype == 'Breakfast' %}
        <li role="presentation" class="active"><a href="#">Home</a></li>
    {% endif %}
    {% if menu.mealtype == 'Lunch' %}
        <li role="presentation"><a href="#">Profile</a></li>
    {% endif %}
{% endfor %}
</ul>

html 添加 django 模板标签后表现不同

html behaving differently after adding django template tags

html

css

django

django-templates