如何在Django模板中对齐文本或URL？Learning Log项目（Python Crash Course）

问题出在<small>是行内元素，text-align:right对行内元素不生效，需要借助Bootstrap4的布局类或者将其转为块级元素来实现对齐。以下是两种简单可行的方案：

方案1：利用Bootstrap的Flex布局（推荐） #

给card-header添加d-flex justify-content-between align-items-center类，让标题和右侧内容自动分占左右空间：

{% extends 'learning_logs/base.html' %}
{% block page_header %}<h3>{{ topic }}</h3>{% endblock page_header %}
{% block content %}
    <p>
        <a href="{% url 'learning_logs:new_entry' topic.id %}">Add a new entry</a>
    </p>
    {% for entry in entries %}
        <div class="card mb-3">
            <h4 class="card-header d-flex justify-content-between align-items-center">
                {{ entry.title }}
                <small>
                    {{ entry.date_added|date:'M d, Y'}}
                    <a href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a>
                </small>
            </h4>
            <div class="card-body">
                {% if entry.text|length > 500 %}
                    {{ entry.text|linebreaks|truncatechars:500 }}
                    <p><a href="{% url 'learning_logs:entry' entry.id %}">Read more</a></p>
                {% else %}
                    {{ entry.text|linebreaks }}
                {% endif %}
            </div>
        </div>
    {% empty %}
            <p>There are no entries for this topic yet.</p>
    {% endfor %}
{% endblock content %}

• d-flex：将元素转为Flex容器
• justify-content-between：让子元素两端对齐
• align-items-center：让子元素垂直居中，避免标题和右侧内容高度不一致导致错位

方案2：给<small>添加块级与右对齐类 #

如果不想修改card-header的布局，也可以给<small>添加d-block text-right类，将其转为块级元素并右对齐：

<small class="d-block text-right">
    {{ entry.date_added|date:'M d, Y'}}
    <a href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a>
</small>

• d-block：把<small>从行内元素转为块级元素，这样text-right（Bootstrap4的右对齐类）就能生效
• text-right：Bootstrap4内置的文本右对齐类，替代自定义的style="text-align:right;"

这样修改后，日期和编辑链接就能正常右对齐了。

内容的提问来源于stack exchange，提问作者Tsunami