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

Question

我正在使用Thymeleaf开发Spring-Boot应用程序。 Bootstrap4是我正在使用的CSS框架。我正在为配置文件页面使用nav-tabs，前三个选项卡没有任何问题但是当我单击地址选项卡并转到任何其他选项卡时，地址选项卡的内容显示在其他选项卡中在标签内容的底部，我无法弄清楚原因。我将包括每个开始标签的结果和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>

Answer 1

面包屑是罪魁祸首。这导致运输选项卡显示在其他窗口中。我只是将其更改为按钮组并获得相同的效果。遗憾的是，无论我在css上工作了多少次，我都无法自行获取面包屑，所以只是将它完全抛弃了。半答案，但是百里香是敏感的，并不总是与框架相配。