bootstrap 4 nav-tabs stop border-bottom vom springen auf schwebeflug

Question

Ich habe versucht, meinen eigenen Stil in die Nav-Tabs in Bootstrap 4 zu integrieren, weil die Out-of-the-Box passt mein Thema sehr gut.

Ich habe es so, wie ich es will, aber wenn ich über einen Tab schweben, bewegt sich der Rand-unten auf dem Nav-Tabs Abschnitt etwa 1px. Ich habe versucht, den Rand, die Polsterung usw. zu manipulieren, aber ich kann nicht herausfinden, wie ich es dazu bringen kann, damit aufzuhören.

Kann jemand hier helfen?

<div class="container-fluid body-content"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-3 col-lg-2"> 
     <div class="row m-b-2"> 
     <div class="col-xs-12"> 

      <div class="row m-b-2 left-nav-container"> 
      <div class="col-xs-12"> 
       <div class="row left-nav"><a class="col-xs-6 col-sm-12 left-nav-menu-item" href="#">Update Starters</a> 
       <a class="col-xs-6 col-sm-12 left-nav-menu-item hidden-xs" href="/rankings/all">Wrestler Rankings</a> 
       </div> 
      </div> 
      </div> 

     </div> 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-9 col-lg-10"> 
     <div class="row"> 
     <div class="col-xs-12"> 
      <!-- Nav tabs --> 
      <ul class="nav nav-tabs" role="tablist"> 
      <li class="nav-item"> 
       <a class="nav-link active" data-toggle="tab" href="#roster" role="tab">Roster</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" data-toggle="tab" href="#schedule" role="tab">Schedule</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" data-toggle="tab" href="#elig" role="tab">Eligibility Breakdown</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" data-toggle="tab" href="#depth" role="tab">Depth Chart</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" data-toggle="tab" href="#info" role="tab">Team Info</a> 
      </li> 
      </ul> 

      <!-- Tab panes --> 
      <div class="tab-content"> 
      <div class="tab-pane fade in active" id="roster" role="tabpanel"> 
       <div class="card"> 
       <div class="card-heading"> 
        <h2>Roster</h2> 
       </div> 
       <div class="table-responsive"> 
        <table class="table table-sm table-hover"> 
        <thead> 
         <tr> 
         <th>Weight</th> 
         <th>Name</th> 
         <th>Class</th> 
         <th>Record</th> 
         <th>Starter</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr style="background-color: lightgray;"> 
         <td>125</td> 
         <td><a href="/wrestler/profile/12221/dancejoey">#4 Dance, Joey</a></td> 
         <td>JR</td> 
         <td>29 - 3</td> 
         <td> 
          <input checked="checked" data-val="true" data-val-required="The Starter field is required." disabled="disabled" id="Wrestlers_0__Starter" name="Wrestlers[0].Starter" style="font-size: large; margin-left: 10px; margin-top: 5px;" 
          type="checkbox" value="true" /> 
          <input name="Wrestlers[0].Starter" type="hidden" value="false" /> 
         </td> 
         </tr> 
        </tbody> 
        </table> 
       </div> 
       </div> 
      </div> 
      <div class="tab-pane fade" id="schedule" role="tabpanel"> 
       <div class="card"> 
       <div class="card-heading"> 
        <h2>Schedule</h2> 
       </div> 
       <div class="table-responsive"> 
        <table class="table table-sm table-hover"> 
        <thead> 
         <tr> 
         <th>Date</th> 
         <th>Name</th> 
         <th>Type</th> 
         <th>Opponent</th> 
         <th>Comparison</th> 
         <th>Win</th> 
         <th>Score</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
         <td>11/07/15</td> 
         <td>Iowa State - Virginia Tech Dual</td> 

         <td>Dual</td> 
         <td> 
          <a href="/team/main/35/iowa-state">#19 Iowa State</a> 
         </td> 

         <td> 
          <a href="/team/dualcomparison/74/virginia-tech/35/iowa-state">Dual Comparison</a> 
         </td> 
         <td>W</td> 
         <td> 
          <a href="/schedule/boxscore/4787/iowa-state-virginia-tech-dual">32 - 3</a> 
         </td> 
         </tr> 
         <tr> 
         <td>11/08/15</td> 
         <td> 
          <a href="/schedule/tournamentparticipants/4876">Hokie Open</a> 
         </td> 

         <td>Tournament</td> 
         <td>Hokie Open</td> 

         <td>(NA)</td> 
         <td></td> 
         <td></td> 
         </tr> 
        </tbody> 
        </table> 
       </div> 
       </div> 
      </div> 
      <div class="tab-pane fade" id="elig" role="tabpanel"> 
       <div class="card"> 
       <div class="card-heading"> 
        <h2>Eligibility Breakdown</h2> 
       </div> 
       <div class="table-responsive"> 
        <table class="table table-sm table-hover table-striped table-bordered"> 
        <thead> 
         <tr> 
         <th class="text-xs-center elig-header-border">Weight</th> 
         <th class="text-xs-center elig-header-border">Recruit</th> 
         <th class="text-xs-center elig-header-border">True Freshman</th> 
         <th class="text-xs-center elig-header-border">Redshirt Freshman</th> 
         <th class="text-xs-center elig-header-border">Sophomore</th> 
         <th class="text-xs-center elig-header-border">Junior</th> 
         <th class="text-xs-center elig-header-border">Senior</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
         <td class="text-xs-center elig-header-border">125</td> 
         <td class="text-xs-center elig-cell"> 
          <p>Joey Prata</p> 
         </td> 
         <td class="text-xs-center elig-cell"> 
          <p><a href="/wrestler/profile/40361/haskett-ryan">#70 Ryan Haskett</a></p> 
         </td> 
         <td class="text-xs-center elig-cell"> 
          <p></p> 
         </td> 
         <td class="text-xs-center elig-cell"> 
          <p></p> 
         </td> 
         <td class="text-xs-center elig-cell"> 
          <p><a href="/wrestler/profile/12221/dance-joey">#4 Joey Dance</a></p> 
         </td> 
         <td class="text-xs-center elig-cell"> 
          <p></p> 
         </td> 
         </tr> 
        </tbody> 
        </table> 
       </div> 
       </div> 
      </div> 
      <div class="tab-pane fade" id="depth" role="tabpanel"> 
       <div class="row"> 
       <div class="col-xs-12"> 
        <div class="card"> 
        <div class="card-heading"> 
         <h2>Depth Chart</h2> 
        </div> 
        </div> 
       </div> 
       </div> 
       <div class="row"> 
       <div class="col-xs-12 col-sm-6 col-md-4 col-xl-3"> 
        <div class="card"> 
        <div class="card-heading"> 
         <h3 class="text-xs-center">125</h3> 
        </div> 
        <div class="table-responsive"> 
         <table class="table table-sm table-hover"> 
         <thead> 
          <tr> 
          <th>Name</th> 
          <th>Class</th> 
          <th>Record</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
          <td><a href="/wrestler/profile/12221/dance-joey">#4 Dance Joey</a></td> 
          <td>JR</td> 
          <td class="text-xs-right">29 - 3</td> 
          </tr> 
          <tr> 
          <td><a href="/wrestler/profile/40361/haskett-ryan">#70 Haskett Ryan</a></td> 
          <td>FR</td> 
          <td class="text-xs-right">4 - 5</td> 
          </tr> 
         </tbody> 
         </table> 
        </div> 
        </div> 
       </div> 
       </div> 
      </div> 
      <div class="tab-pane fade" id="info" role="tabpanel"> 
       <div class="card"> 
       <div class="card-heading"> 
        <h2>Team Information</h2> 
       </div> 
       <div class="card-block"> 
        <form class="form-horizontal" role="form" method="POST" action="Edit"> 
        <input data-val="true" data-val-required="The SchoolId field is required." id="SchoolInfo_SchoolId" name="SchoolInfo.SchoolId" type="hidden" value="74" /> 

        <div class="row form-group"> 
         <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
         <label class="form-control-label" for="SchoolInfo_SchoolName">SchoolName</label> 
         </div> 
         <div class="col-xs-6 col-sm-8 col-md-4"> 
         <input class="form-control" id="SchoolInfo_SchoolName" name="SchoolInfo.SchoolName" readonly="readonly" type="text" value="Virginia Tech" /> 
         </div> 
        </div> 
        <div class="row form-group"> 
         <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
         <label class="form-control-label" for="SchoolInfo_Aka">Aka</label> 
         </div> 
         <div class="col-xs-6 col-sm-8 col-md-4"> 
         <input class="form-control" id="SchoolInfo_Aka" name="SchoolInfo.Aka" placeholder="(ie North Dakota State University is NDSU)" type="text" value="" /> 
         </div> 
        </div> 
        <div class="row form-group"> 
         <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
         <label class="form-control-label" for="SchoolInfo_Nickname">Nickname</label> 
         </div> 
         <div class="col-xs-6 col-sm-8 col-md-4"> 
         <input class="form-control" id="SchoolInfo_Nickname" name="SchoolInfo.Nickname" type="text" value="Hokies" /> 
         </div> 
        </div> 
        <div class="row form-group"> 
         <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
         <label class="form-control-label" for="SchoolInfo_Division">Division</label> 
         </div> 
         <div class="col-xs-6 col-sm-8 col-md-4"> 
         <input class="form-control" id="SchoolInfo_Division" name="SchoolInfo.Division" readonly="readonly" type="text" value="Division I" /> 
         </div> 
        </div> 
        <div class="row form-group"> 
         <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
         <label class="form-control-label" for="SchoolInfo_Conference">Conference</label> 
         </div> 
         <div class="col-xs-6 col-sm-8 col-md-4"> 
         <input class="form-control" id="SchoolInfo_Conference" name="SchoolInfo.Conference" readonly="readonly" type="text" value="ACC" /> 
         </div> 
        </div> 
        <div class="row form-group"> 
         <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
         <label class="form-control-label" for="SchoolInfo_TwitterHandle">TwitterHandle</label> 
         </div> 
         <div class="col-xs-6 col-sm-8 col-md-4"> 
         <input class="form-control" id="SchoolInfo_TwitterHandle" name="SchoolInfo.TwitterHandle" readonly="readonly" type="text" value="@VT_Wrestling" /> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-xs-12"> 
         <div class="validation-summary-valid" data-valmsg-summary="true"> 
          <ul> 
          <li style="display:none"></li> 
          </ul> 
         </div> 
         </div> 
        </div> 
        </form> 
       </div> 
       </div> 
      </div> 
      </div> 

     </div> 
     </div> 
    </div> 
    </div> 

    <footer class="hidden-xs-down"> 
    <nav class="navbar navbar-fixed-bottom navbar-dark bg-inverse p-t-1 text-xs-center"> 
     <h6>&copy; 2016 - WrestleStat - ACS, LLC</h6> 
    </nav> 
    </footer> 
</div> 

CSS

body { 
    padding-top: 70px; 
    padding-bottom: 20px; 
    margin-bottom: 60px; 
} 


/* Wrapping element */ 


/* Set some basic padding to keep content from hitting the edges */ 

.body-content { 
    padding-left: 15px; 
    padding-right: 15px; 
} 


/* Set widths on the form inputs since otherwise they're 100% wide */ 

input, 
select, 
textarea { 
    max-width: 280px; 
} 

a { 
    color: black; 
    text-decoration: underline; 
} 

a:hover { 
    color: red; 
} 


/* Carousel */ 

.carousel-caption { 
    z-index: 10 !important; 
} 

.carousel-caption p { 
    font-size: 20px; 
    line-height: 1.4; 
} 

@media (min-width: 768px) { 
    .carousel-caption { 
    z-index: 10 !important; 
    } 
} 

.footer { 
    position: absolute; 
    /*bottom: 0;*/ 
    width: 99%; 
    height: 60px; 
    line-height: 60px; 
    background-color: black; 
    /* #f5f5f5; */ 
} 

.widget { 
    font-size: .85rem; 
    padding: .75rem .75rem; 
} 

.widget-header { 
    padding: 1rem .75rem .5rem .75rem; 
} 

.borderless td, 
.borderless th { 
    border: none; 
} 

.no-underline { 
    text-decoration: none; 
} 


/*.card-block-border-bottom { 
    border-bottom: 1px solid #e5e5e5; 
}*/ 


/* Left Nav stuff */ 

.left-nav-menu-item { 
    color: #eceeef; 
    text-decoration: none; 
    border-top: .1rem solid white; 
    background-color: #373a3c; 
} 

.left-nav { 
    line-height: 3rem; 
} 

.left-nav > div:first-of-type { 
    margin-top: .2rem; 
} 

a.left-nav-menu-item:hover { 
    cursor: pointer; 
} 

a.left-nav-menu-item:hover { 
    color: red; 
    text-decoration: none; 
} 


/* End of left nav */ 


/* Top nav overrides since Bootstrap 4 isn't complete */ 

.navbar-brand { 
    float: none; 
    margin-top: 1px; 
} 

.navbar-nav .nav-item { 
    float: none; 
} 

.navbar-divider, 
.navbar-nav .nav-item + .nav-item, 
.navbar-nav .nav-link + .nav-link { 
    margin-left: 0; 
} 

@media (min-width: 34em) { 
    .navbar-brand { 
    float: left; 
    } 
    .navbar-nav .nav-item { 
    float: left; 
    } 
    .navbar-divider, 
    .navbar-nav .nav-item + .nav-item, 
    .navbar-nav .nav-link + .nav-link { 
    margin-left: 1rem; 
    } 
} 

.nav.navbar-nav { 
    padding-top: .3rem; 
} 

.navbar .navbar-nav .nav-item .nav-link { 
    text-decoration: none; 
} 

.navbar .navbar-nav .nav-item .nav-link:hover { 
    cursor: pointer; 
} 

.navbar .navbar-nav .nav-item .nav-link.donate { 
    font-weight: bolder; 
    color: green; 
} 

.navbar .navbar-nav .nav-item .nav-link.donate:hover { 
    color: white; 
} 

.navbar .navbar-nav .nav-item .dropdown-item { 
    background-color: #373a3c; 
    text-decoration: none; 
    color: #eceeef; 
} 

.navbar .navbar-nav .nav-item .dropdown-item:hover { 
    color: #eceeef; 
} 


/* End of top nav overrides */ 


/* tab overrides */ 

.nav.nav-tabs .nav-item a { 
    text-decoration: none; 
} 

.nav.nav-tabs a.active { 
    border: 1px solid black; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
    background-color: #373a3c; 
    border-bottom: none; 
    color: white; 
    font-weight: bold; 
} 

.nav.nav-tabs li.nav-item:hover { 
    border: 1px solid #373a3c; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
    border-bottom: none; 
    margin-bottom: 0; 
    padding-bottom: none; 
} 

.nav.nav-tabs li.nav-item:hover a { 
    color: black; 
} 

ul.nav.nav-tabs { 
    border-bottom: 2px solid #373a3c; 
    margin-bottom: 1rem; 
} 

ul.nav.nav-tabs div.tab-content div.card { 
    border: none; 
} 


/* end of tab overrides*/ 


/* eligibility breakdown page */ 

.elig-header-border { 
    background-color: lightgray; 
} 

.elig-border { 
    border: .1rem solid black; 
} 

td.elig-cell:hover { 
    background-color: red; 
} 

td.elig-cell:hover a:hover { 
    color: white; 
} 


/* end of eligibility breakdown */ 

jsfiddle

Answer 1

Wie debuggen schweben Staaten

Um zu sehen, was passiert, wenn ein Element schwebt, empfehle ich Ihnen die „Kraftelement Zustand zu verwenden "Funktionalität :hover von Chrome Dev Tools:

Dadurch kann ich Editing und Checking/Uncheking-Sachen spielen, um eine Lösung zu finden, dann eine CSS-Korrektur ausarbeiten.

Lösung

Es gibt keinen Zweifel, Sie ein Problem mit verschachtelten Grenzen haben. Sie können die vorherige Technik verwenden, um eine sauberere Lösung zu finden, aber hier ist eine schnelle fix:

.nav.nav-tabs li.nav-item { 
    border: 1px solid transparent; 
    margin-bottom: -2px !important; 
} 

.nav.nav-tabs li.nav-item:hover { 
    border: 1px solid #373a3c !important; 
    border-bottom: 1px solid transparent !important; 
} 

.nav.nav-tabs li.nav-item a.nav-link:hover { 
    border: 1px solid transparent; 
    border-bottom: none; 
} 

JSFiddle

bearbeiten

In Anbetracht der :focus Ereignis, das ausgelöst wird, wenn das Element angeklickt wird, Vielleicht möchten Sie auch die Standard-Bootstrap-Stile dafür überschreiben.

den Fokusselektor hinzufügen .nav.nav-tabs a.active:focus zu dieser Stile, so dass sie gelten, wenn auch das Element konzentriert:

.nav.nav-tabs a.active, .nav.nav-tabs a.active:focus { 
    border: 1px solid black; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
    background-color: #373a3c; 
    border-bottom: none; 
    color: white; 
    font-weight: bold; 
} 

es Als nächstes sollten Sie den Hintergrund zu überschreiben, es weiß zu halten, wenn schweben, auch wenn das Element auch konzentriert, das so hinzufügen:

.nav.nav-tabs a.active:hover { 
    background-color: #fff; 
} 

JSFiddle

Answer 2

Hier ist eine andere Lösung, wenn Sie eine nicht hinzufügen möchten transparent Grenze aber nur

mit Polsterung ändern Sie den Eintrag .nav.nav-Tabs li.nav-Artikel: schweben zu:

.nav.nav-tabs li.nav-item:hover { 
    border: 1px solid #373a3c; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
    border-bottom: none; 
    padding: 0px 0px 0px 0px; 
    } 

und fügen:

.nav.nav-tabs li.nav-item{ 
    padding: 1px 1px 0px 1px; 
} 

Es sollte funktionieren erwartet. JsFiddle