Bootstrap4迁移：Django Jinja2下拉菜单a标签统一加类方法

针对Django+Jinja2项目从Bootstrap 3迁移到4时，需要反复给下拉菜单a标签添加固定类的问题，有三种低改动成本的实现方式，完全不需要手动逐行修改HTML：

模板层复用循环逻辑批量渲染 #

Bootstrap3时代继承的老模板，基本都是通过Jinja2循环动态生成菜单项，很少硬编码写死每一个a标签。只需要在循环块的a标签上统一添加一次class="nav-item nav-link"，所有循环生成的下拉菜单项就会自动带上对应类，改动量仅为一行：

<ul class="dropdown-menu">
    {% for item in menu_items %}
    <li>
        <a class="nav-item nav-link" href="{{ item.url }}">{{ item.label }}</a>
    </li>
    {% endfor %}
</ul>

这种方式完全适配Bootstrap4的官方结构要求，没有样式兼容风险。

自定义CSS覆写选择器兼容老结构 #

如果不想改动任何原有模板的HTML结构，可以通过少量自定义CSS，把原本nav-item、nav-link对应的样式规则，直接匹配到下拉菜单内的a元素上，实现和添加类完全一致的视觉效果，完全回到Bootstrap3时代的写代码体验：

/* 替代nav-item nav-link的样式规则 */
.dropdown-menu > li > a {
    display: block;
    padding: 0.5rem 1rem;
    clear: both;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

/* 匹配交互态样式 */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}

这种方式的迁移成本为零，不需要修改任何原有业务模板代码。

借助Bootstrap集成库自动挂载类 #

如果项目使用了django-bootstrap4、django-jinja-bootstrap这类第三方导航渲染组件，可以直接在全局组件配置中指定链接的默认类参数，组件自动渲染时就会给所有生成的a标签（包括下拉菜单内的链接）统一挂上nav-item nav-link类，完全不需要手写模板循环逻辑。

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