將邊框底部添加到 Bootstrap 導航欄鏈接

Question

我有一個 bootstrap 4 導航欄，我想為每個鏈接添加 hover 影響。 我添加了以下 css 來覆蓋標准 styles ，它給出了我所追求的“有點”。 當懸停在鏈接上時，邊框底部會顯示，但也會在懸停時將文本向上推。 它也不在導航欄本身的底部。

當我使用 img 設置導航欄所在行的高度，然后將高度拆分 50% 時，我想知道這是否是我所反對的？

從圖片中可以看出，我希望橙色邊框位於導航欄的底部。 作為迄今為止我在任何鏈接上懸停時所做的意外結果，整個文本向上移動 5px 左右，然后在不懸停時下降。

這是制作導航欄的代碼......

<div class="container-fluid p-0">
<div class="row no-gutters shadow">
<div class="col-sm-12 col-md-12 col-lg-1">
  <img src="<?php echo URLROOT.'/public/img/msplogo.jpg'; ?>" class="header-logo mx-auto d-block"/>
</div>
<div class="col-sm-12 col-md-12 col-lg-11">
  <div class="row no-gutters h-50">
    <div class="d-none d-lg-block col-12">
      <nav class="navbar navbar-expand-lg navbar-dark bg-msp-darkblue h-100">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
      </nav>
    </div>
  </div>
</div>

這是 CSS...

/* Header Logo */
.header-logo {
  width:100%;
  max-width: 160px;
}
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 768px) {
 .header-logo {
   width:100%;
   max-width: 80px;
   margin:10px;
 }
}

/* Large viewport navbar */
.nav-link {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8vw;
  font-weight: bolder;
  text-transform: uppercase;
}
.nav-link:hover {
  border-bottom: 5px solid #ff7240;
  color:#fff!important;
}

誰能指出我正確的方向？

問候

馬特

Answer 1

為防止導航欄在您通過鏈接 hover 時增長，請指定與以下大小相同的透明邊框底部：hover 邊框。

 .nav-link { border-bottom: 5px solid transparent; }.nav-link:hover { border-bottom: 5px solid red; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar" style="border: 1px solid gray"> <ul class="navbar-nav"> <li> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> </ul> </nav>

Answer 2

經過一番挖掘，我發現我需要將 h-100 添加到 ul。 這然后使鏈接填充它的父元素，然后在 css 使用 height:100% on the.nav-link

完成的代碼是：

<div class="container-fluid p-0">
  <div class="row no-gutters shadow">
    <div class="col-sm-12 col-md-12 col-lg-1">
      <img src="<?php echo URLROOT.'/public/img/msplogo.jpg'; ?>" class="header-logo mx-auto d-block"/>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-11">
      <div class="row no-gutters h-50">
        <div class="d-none d-lg-block col-12">
          <nav class="navbar navbar-expand-lg navbar-dark bg-msp-darkblue h-100 py-0">
              <ul class="navbar-nav h-100 mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>
              </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

還有 CSS - 我必須在鏈接中添加一個 padding-top 以將它也移回中間。

/* Header Logo */
.header-logo {
  width:100%;
  max-width: 160px;
}
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 768px) {
  .header-logo {
    width:100%;
    max-width: 80px;
    margin:10px;
  }
}

/* Large viewport navbar */
.nav-link {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8vw;
  font-weight: bolder;
  text-transform: uppercase;
  border-bottom: 5px solid transparent;
  height:100%
  padding-top:27px;
}

.nav-link:hover {
  border-bottom: 5px solid #ff7240;
  color:#fff!important;
}