Tab-Contentレイアウトが他のタブに表示されます

Question

私はThymeleafを使ってSpring-Bootアプリケーションを開発しています。 Bootstrap4は私が使用しているCSSフレームワークです。最初の3つのタブには問題はありませんが、アドレスタブをクリックして他のタブに移動すると、[アドレス]タブの内容が他のタブに表示されますそのタブのコンテンツの下部に、私は理由を理解することができません。私はそれぞれの開始タブの結果とCSSのイメージを含めるでしょう。 I現在の線の量に起因するページ全体のHTMLを含めることを躊躇しています（480合計）

<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で何回作業したかに関係なく、ブレッドクラム自体は動作しませんでしたので、完全にそれを投げ捨てました。半回答ですが、thymeleafは厄介で、常にフレームワークでうまくいくとは限りません。