【问题标题】：bootstrap 4 nav-tabs stop border-bottom from jumping down on hoverbootstrap 4 nav-tabs 阻止边框底部在悬停时跳下
【发布时间】：2016-07-28 17:57:47
【问题描述】：

我尝试将自己的风格融入 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

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

【解决方案1】：

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

将您的条目 .nav.nav-tabs li.nav-item: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;
  }

并添加：

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

它应该按预期工作。 JsFiddle

【讨论】：

不行，边框还是往下跳
对我来说工作正常（在 chrome 和 FF 中测试）jsfiddle.net/fooffjje
我在问题中提供的小提琴上对其进行了测试。更新小提琴并将其发布在这里...
@ganders 你能发布你改变的 jsfiddle 的链接，包括我的代码，你能确认检查我发布的 jsfiddle 的结果 jsfiddle.net/fooffjje 吗？
谢谢你。是的，您需要更改第一个代码块“.nav.nav-tabs li.nav-item:hover”（如果要添加新代码，请删除现有代码），然后是第二个代码块“.nav.nav-标签 li.nav-item”。我也刚刚编辑了我的答案以添加到 JSFiddle 的链接

【解决方案2】：

如何调试悬停状态

为了查看悬停元素时会发生什么，我建议您使用:hover 的Chrome Dev Tools 的“强制元素状态”功能：

这样做，我可以进行编辑和检查/取消检查以找到解决方案，然后详细说明 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

【讨论】：

谢谢，对 Chrome 中的强制状态一无所知。关于您对“嵌套边框”的评论，我还假设这是我的卡片在导航选项卡内时格式不正确的问题......但这是一个全新的问题。
知道为什么，当您单击选项卡时，背景颜色不会切换为黑色？（这是我放在 .active 类上的覆盖）？如果您单击 jsfiddle 上的 css 部分，它会切换到黑色。在实际部署的网站上，它从不将背景切换为黑色。
当一个元素被点击时，它会获得:focus事件。 Bootstrap 具有 .nav-link.active:focus 的默认样式，如果您也想保留该样式，则必须覆盖该样式。我正在编辑答案。
完成。当使用像 Bootstrap 这样的 CSS 框架时，编辑其中一些元素的外观并非易事。如您所见，您需要覆盖来自不同元素状态的大量样式。根据所需的自定义，您可以考虑使用现有的 Bootstrap 主题，它更适合您的需求，并且不会强迫您编辑这么多样式。