屏幕调整大小后,Nav-item的CSS无法正确应用

调整屏幕大小后,导航链接按钮不再使用我给它们的CSS。我尝试了@media函数,但是在调整屏幕大小后,它对CSS的更改没有反应。 (表是空的,它们由JS代码填充。)

调整屏幕大小后,为什么没有响应或使用CSS?

before resizing (large screen)

after resizing (smaller screen)

.annuHypoTabellen .nav-link:hover {
  background-color: #ff486dad;
  color: #fff;
}

.annuHypoTabellen  .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: #de002e;
  font-weight: 700;
  color: #fff;
}

.annuHypoTabellen .nav-link {
  position: relative;
  display: block;
  margin: 0;
  padding: 13px 16px;
  background-color: rgba(201, 201, 201, 0.425);
  border: 0;
  border-radius: 0;
  color: #616161;
  transition: background-color 0.2s ease;
}
                        <div class="annuHypoTabellen mt-3">
                        <div class="row">
                            <div class="col-md-8 col-xl-9 col-12">
                                <h4 class="text-gtdirect mt-3 mb-3">
                                    Overzicht totale lasten bij <ins>niet</ins> oversluiten
                                </h4>
                            </div>
                            <div class="col-md-4 col-xl-3 col-12 ml-auto d-flex justify-content-end ">
                                <ul class="nav nav-pills mb-3 navHypoTabsSmall" id="huidigeHypoTab" role="tablist">
                                    <li class="nav-item">
                                    <a class="nav-link nav-link-annuHypo active" id="pills-jaarHuidigeHypo-tab" data-toggle="pill" href="#pills-jaarHuidigeHypo" role="tab" aria-controls="pills-jaarHuidigeHypo" aria-selected="true">Per Jaar</a>
                                    </li>
                                    <li class="nav-item">
                                    <a class="nav-link nav-link-annuHypo" id="pills-maandHuidigeHypo-tab" data-toggle="pill" href="#pills-maandHuidigeHypo" role="tab" aria-controls="pills-maandHuidigeHypo" aria-selected="false">Per Maand</a>
                                    </li>
                                </ul>
                            </div>
                          </div>

                          <div class="swipeIcons mb-2">
                              <div class="row">
                                  <div class="col">
                                    <i class="fas fa-arrow-left fa-lg float-left text-gtdirect pt-1"></i>
                                  </div>
                                  <div class="col">
                                    <h5 class="text-center lead">Scroll</h5>
                                  </div>
                                  <div class="col">
                                    <i class="fas fa-arrow-right fa-lg float-right text-gtdirect pt-1"></i>
                                  </div>
                              </div>
                          </div>

                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-jaarHuidigeHypo" role="tabpanel" aria-labelledby="pills-jaarHuidigeHypo-tab">
                                <div class="anhypoResult">
                                    <div class="scrollBox">
                                        <div class="table-responsive">
                                            <table class="table table-striped">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Jaar</th>
                                                        <th scope="col">Totale jaar rente</th>
                                                        <th scope="col">Totale jaar aflossing</th>
                                                        <th scope="col">Schuld ultimo</th>
                                                        <th scope="col">Eigen-woning-forfait</th>
                                                        <th scope="col">IB-EWF</th>
                                                        <th scope="col">IB rente aftrek</th>
                                                        <th scope="col">Netto lasten</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="annuHuidigeHypoResultTabelJaar">
                                                </tbody>
                                            </table>
                                        </div>
                                    </div> 
                                    
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-maandHuidigeHypo" role="tabpanel" aria-labelledby="pills-maandHuidigeHypo-tab">
                                <div class="anhypoResult">
                                    <div class="scrollBox">
                                        <div class="table-responsive">
                                            <table class="table table-striped">
                                                <thead>
                                                <tr>
                                                    <th scope="col">Jaar</th>
                                                    <th scope="col">Maand</th>
                                                    <th scope="col">Rente</th>
                                                    <th scope="col">Aflossing</th>
                                                    <th scope="col">Schuld ultimo</th>
                                                    <th scope="col">Eigen-woning-forfait</th>
                                                    <th scope="col">IB-EWF</th>
                                                    <th scope="col">IB rente aftrek</th>
                                                    <th scope="col">Netto lasten</th>
                                                </tr>
                                                </thead>
                                                    <tbody class="annuHuidigeHypoResultTabel">
                                                    </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
评论