bootstrap 4 nav-tabs 阻止 border-bottom 在悬停时向下跳

Question

我尝试将自己的风格融入 bootstrap 4 中的导航选项卡，因为开箱即用的设计非常适合我的主题。

我已经把它看成我想要的样子了，但是当我将鼠标悬停在一个选项卡上时，导航选项卡部分的边框底部向下移动了大约 1 像素。我试过操纵边距、填充等，但似乎无法弄清楚如何让它停止这样做。

有人可以帮忙吗？

<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

如何调试悬停状态

为了查看悬停元素时会发生什么，我建议您使用 Chrome Dev Tools 的 "force element state" 功能 :hover:

这样做，我可以玩编辑和 checking/uncheking 东西来找到解决方案，然后详细说明 CSS 更正。

解决方案

毫无疑问，您遇到了嵌套边框问题。您可以使用之前的技术找到更简洁的解决方案，但这里有一个快速修复方法：

.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

编辑

考虑到当元素被点击时触发的 :focus 事件，您可能还想为它覆盖默认的 Bootstrap 样式。

将焦点选择器 .nav.nav-tabs a.active:focus 添加到这些样式，因此它们在聚焦元素时也适用：

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

在它旁边，您需要覆盖背景以使其在悬停时保持白色，即使该元素也处于焦点状态时也是如此，因此请添加：

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

JSFiddle

Answer 2

如果您不想添加透明边框而只想使用填充，这是另一种解决方案

更改您的条目 .nav.nav-tabs li.nav-item:hover to:

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

并添加：

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

它应该按预期工作。 JsFiddle

bootstrap 4 nav-tabs 阻止 border-bottom 在悬停时向下跳

bootstrap 4 nav-tabs stop border-bottom from jumping down on hover

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4

如何调试悬停状态

解决方案

编辑