Bootstrap 4 Pills内容显示异常问题求助

Hey there, let's dig into this Bootstrap Pills issue you're dealing with. It’s super common to run into tab sync problems when expanding a working set—even if you’ve checked for unclosed divs! Here are the most likely fixes to get your tabs working right again:

核心排查步骤 #

• Double-check tab-to-content ID matching
  Bootstrap’s tab system relies entirely on the data-target (or href) attribute on your nav links matching the id of your tab content panes exactly. For your new "Activity" and "Impact" tabs, make sure there’s no typos, capitalization mismatches, or extra spaces. Example of correct structure:

  <!-- Nav item -->
  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#activity">Activity</a>
  </li>
  <!-- Corresponding content pane -->
  <div class="tab-pane fade" id="activity">
    <!-- Your Activity content here -->
  </div>
  

• Ensure all tab panes live inside .tab-content
  Every .tab-pane must be wrapped in the same parent .tab-content container. If your new panes are accidentally placed outside this container (or nested in another div), they’ll render in the wrong spot. Correct structure:

  <div class="tab-content">
    <div class="tab-pane active" id="stemuli">STEMuli content</div>
    <div class="tab-pane fade" id="who-we-are">Who we are content</div>
    <div class="tab-pane fade" id="activity">Activity content</div>
    <div class="tab-pane fade" id="impact">Impact content</div>
  </div>
  

• Scan for duplicate IDs
  Duplicate IDs anywhere on the page will break Bootstrap’s JavaScript logic. Use your browser’s dev tools (F12) to search for "activity" and "impact"—make sure those IDs only exist on their respective tab panes.

• Verify Bootstrap JS load order
  Bootstrap’s tab functionality depends on jQuery. Make sure you’re loading jQuery first, then Bootstrap’s JS file, and only loading each once. Duplicate or out-of-order scripts can cause weird behavior like unresponsive tabs.

欣赏你的《Infinity War》占位图 #

你的CSS代码（已格式化） #

.popover-header{ color:#000000; }
li{ color:#000000; }
#border{ border-style: solid; border-color: black; }
#row{ overflow: hidden; }
.logo{ z-index:0; }
h5{ color: #ffffff; }
.row { width: 100%; z-index: 1; }
.row__inner { -webkit-transition: 450ms -webkit-transform; transition: 450ms -webkit-transform; transition: 450ms transform; transition: 450ms transform, 450ms -webkit-transform; font-size: 0; white-space: nowrap; margin: 50px 0; padding-bottom: 30px; padding-bottom: 30px; }
.tile { position: relative; display: inline-block; width: 250px; height: 250px; margin-right: 10px; margin-left: 50px; font-size: 20px; cursor: pointer; -webkit-transition: 450ms all; transition: 450ms all; -webkit-transform-origin: center left; transform-origin: center left; }
.tile__img { width: 250px; height: 250px; -o-object-fit: cover; object-fit: cover; }
.tile__details { position: absolute; bottom: 0; left: 0; right: 0; top: 0; font-size: 10px; opacity: 0; background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0))); background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); -webkit-transition: 450ms opacity; transition: 450ms opacity; }
.tile__details:after, .tile__details:before { content: ''; position: absolute; top: 50%; left: 50%; display: #000; }
.tile__details:before { left: 0; width: 100%; font-size: 30px; margin-left: 7px; margin-top: -18px; text-align: center; z-index: 2; }
.tile:hover .tile__details { opacity: 1; }
.tile__title { position: absolute; bottom: 0; padding: 10px; }
.row__inner:hover { -webkit-transform: translate3d(-62.5px, 0, 0); transform: translate3d(-62.5px, 0, 0); }
.row__inner:hover .tile { opacity: 0.3; }
.row__inner:hover .tile:hover { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 1; }
.tile:hover ~ .tile { -webkit-transform: translate3d(125px, 0, 0); transform: translate3d(125px, 0, 0); }
a:hover{ color: #F1D302; }
.checkbox-wrapper { height: 13px; width: 13px; }
.card-img-top { height: 300px; width: 100%; }
.btn-xlong { padding: 10px 50px; font-size: 22px; line-height: normal; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.steps-form-3 { width: 2px; height: 470px; position: relative; }
.steps-form-3 .steps-row-3 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
.steps-form-3 .steps-row-3:before { top: 14px; bottom: 0; position: absolute; content: ""; width: 2px; height: 100%; background-color: #7283a7; }
.steps-form-3 .steps-row-3 .steps-step-3 { height: 150px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; text-align: center; position: relative; }
.steps-form-3 .steps-row-3 .steps-step-3.no-height { height: 50px; }
.steps-form-3 .steps-row-3 .steps-step-3 p { margin-top: 0.5rem; }
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 { width: 60px; height: 60px; border: 2px solid #59698D; background-color: white !important; color: #59698D !important; border-radius: 50%; padding: 18px 18px 15px 15px; margin-top: -22px; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover { border: 2px solid #4285F4; color: #4285F4 !important; background-color: white !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa { font-size: 1.7rem; }
::-webkit-scrollbar{ width: 0px; height:5px; }
::-webkit-scrollbar-thumb{ border-radius:10px; box-shadow: insert 0 0 6px rgba(0,0,0,.3); }
.spacing{ padding: 6px; }
/*This css file defines the color scheme and font of all of the webpages so import into every new webpage*/
body { font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; background-color: #9E2B25; color:#FDFFFC; }
.button{ background-color:#0267C1; }
.nav-pills .nav-link.active { background-color: #0267c1; }
h3{ color: #ffffff; }
#cardimg { height /* 注意：这里的CSS代码被截断了，记得补全哦 */ }

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