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

【问题标题】：Tab-Content Layout shows up in other tab选项卡内容布局显示在其他选项卡中
【发布时间】：2018-06-08 17:03:18
【问题描述】：

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

<div class="tab-pane fade" id="tab-3" role="tabpanel" th:classappend="${classActiveBilling}? 'in active show'">
  <div class="card">
    <div class="card-body">
      <div class="card-title">
        <div class="container">
          <div class="row">
            <div class="col">
              <h4 class="mb-0 align-middle" style="margin-top: 15px;">Billing Information</h4>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="breadcrumb" style="background-color:transparent;">
                <a class="breadcrumb-item active" th:href="@{/listOfCreditCards}" th:style="${listOfCreditCards}? 'color:#6e45e0'">List of Credit Cards</a>
                <a class="breadcrumb-item active" th:href="@{/addNewCreditCard}" th:style="${addNewCreditCard}? 'color:#6e45e0'">Add/Update Credit Card</a>
              </div>
            </div>
          </div>

    <div class="tab-pane fade" id="tab-4" role="tabpanel" th:classappend="${classActiveShipping}? 'in active show'">
      <div class="card">
        <div class="card-body">
          <div class="card-title">
            <div class="container">
              <div class="row">
                <div class="col">
                  <h4 class="mb-0 align-middle" style="margin-top: 15px;">Shipping Information</h4>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <div class="breadcrumb" style="background-color:transparent;">
                    <a class="breadcrumb-item active" th:href="@{/listOfShippingAddresses}" th:style="${listOfShippingAddresses}? 'color:#6e45e0'">List of Shipping Addresses</a>
                    <a class="breadcrumb-item active" th:href="@{/addNewShippingAddress}" th:style="${addNewShippingAddress}? 'color:#6e45e0'">Add/Update Shipping Address</a>
                  </div>
                </div>
              </div>

【问题讨论】：

根据行为，我的猜测是 .active 类没有从最后一个选项卡中清除。 #tab-4 有哪些类处于这种奇怪的状态？
每当使用 thymeleaf 表示法附加 classActiveShipping 时，也会附加 active 和 show 类，这是 nav-tab 功能工作所必需的。
当我回到家时，我将不得不仔细检查该页面上哪些课程处于活动状态，并会在必要的帖子中对其进行更新。可能是我的后端导致了这个问题，因为我在使用类似设置的网站的登录/注册部分没有这个问题。
我对 thymeleaf 不熟悉，但从 Bootstrap 的角度来看，所有设置了.active .show 的选项卡都在同一时间可见。当离开一个选项卡时，Bootstrap 会从中删除这两个类。我认为，在这种情况下，这种移除会失败。不过，这只是一个疯狂的猜测。
为了让导航选项卡工作，必须在该选项卡通过 thymeleaf 而不是正常的 css 方式激活时附加它们。没有它就试过了，我无法让它工作。

标签： html spring-boot thymeleaf bootstrap-4

【解决方案1】：

面包屑是罪魁祸首。它导致运输标签显示在其他窗口中。我只是将其更改为按钮组并获得相同的效果。不幸的是，无论我在 css 上工作了多少次，我都无法让面包屑自己工作，所以就把它完全扔掉了。半回答，但百里香很敏感，并不总是与框架很好地配合。

【讨论】：