bootstrap 4 nav-sekmeler sınırın altından atlamak için kenarlıktan durur

Question

Kutudan çıktığında temayıma çok iyi uyuyor çünkü kendi stilimi bootstrap 4'teki gezinme sekmelerine dahil etmeye çalıştım.

Nasıl yapmak istediğimi anladım, ancak bir sekmenin üzerine geldiğimde, gezinme sekmesi üzerindeki kenarlık çizgisi yaklaşık 1 pks aşağıya iner. Kenar boşluğu, dolgu malzemesi vb. Manipüle etmeye çalıştım ama bunu yapmayı durdurmak için nasıl elde edeceğimi anlayamıyorum.

Birisi burada yardımcı olabilir mi?

<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

hover hata ayıklamak için nasıl devletler bir öğe gezinip ne olacağını görmek için

, sana "kuvvet elemanı durumunu kullanmayı tavsiye " Chrome Dev Tools numaralı işlevselleştirme :hover:

Bunu yaparak, bir çözüm bulmak için düzenleme ve denetleme/işaretlemeyi oynatabilir ve daha sonra bir CSS düzeltmesi ayrıntılarını hazırlayabilirim.

Çözüm

iç içe geçmiş sınırları ile ilgili bir sorun hiç şüphe yok. ,

.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

Düzenleme

eleman tıklandığında tetiklenir :focus olayı düşünürsek: Burada daha temiz bir çözüm bulmak için önceki tekniği kullanabilir, ancak hızlı bir düzeltmedir Bunun için varsayılan Önyükleme stillerini de geçersiz kılmak isteyebilirsiniz. Çok elemanı odaklama yaparken

bu stilleri odak seçici .nav.nav-tabs a.active:focus Ekle, bu yüzden geçerlidir: buna

.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; 
} 

Ardından, hatta, gelindiğinde beyaz tutmak için arka plan geçersiz isteyeceksiniz eleman da odaklanmıştır, bu nedenle bu ekleyin:

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

İşte

JSFiddle

Answer 2

bir eklemek istemiyorsanız başka çözüm şeffaf sınır ama sadece kullanarak dolgu

sizin giriş .nav.nav-tabs li.nav-öğeyi değiştirin: hover:

.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; 
    } 

ve ekleyin:

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

Sanki çalışmalıdır beklenen. JsFiddle