Html 选项卡内容布局显示在其他选项卡中

我正在使用Thymeleaf开发一个Spring启动应用程序。Bootstrap4是我正在使用的CSS框架。我在个人资料页面上使用导航选项卡，前三个选项卡没有任何问题，但当我单击地址选项卡并转到任何其他选项卡时，地址选项卡的内容会显示在该选项卡内容底部的其他选项卡中，我不知道为什么。我将包括每个开始标签的结果和css的图像。由于当前的行数（总共480行），我不太愿意包含整个页面的html

计费信息

罪魁祸首是面包屑。这导致“配送”选项卡显示在其他窗口中。我只是把它改成了一个按钮组，得到了同样的效果。不幸的是，不管我在css上工作了多少次，我都不能让面包屑自己工作，所以我就把它完全扔掉了。半回答，但thymeleaf很敏感，不总是很好地使用框架

根据该行为，我猜测，

.active

类没有从最后一个选项卡中清除。什么类

#tab-4

处于这种奇怪的状态？每当使用thymeleaf表示法附加classActiveShipping时，也会附加nav tab功能工作所需的active和show类。当我回到家时，我必须再次检查该页面上哪些类是活动的，并在必要时更新它。可能是我的后端导致了该问题，因为我在使用类似设置的站点的登录/注册部分没有该问题。我不熟悉thymeleaf，但从引导的角度来看，所有选项卡都可以同时看到

.active.show

设置。当导航离开选项卡时，引导将从该选项卡中删除这两个类。我想，在这种情况下，这种移除是失败的。不过这只是一个猜测。为了使导航选项卡正常工作，必须在该选项卡被thymeleaf激活而不是正常的css方式激活时追加导航选项卡。没有它就试过了，但我无法让它工作。