我有一個 Bootstrap 4 導航欄，我想為每個鏈接添加懸停效果。我添加了以下 css 來覆蓋標準樣式，這給出了我所追求的“有點”。將鼠標懸停在鏈接上時，會顯示底部邊框，但也會在懸停時將文本向上推。它也不位于導航欄本身的底部。當我使用 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>
2 回答
猛跑小豬
TA貢獻1858條經驗 獲得超8個贊
為了防止當您將鼠標懸停在鏈接上時導航欄變大，請指定與 :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>
慕標5832272
TA貢獻1966條經驗 獲得超4個贊
經過一番挖掘后，我發現我需要將 h-100 添加到 ul 中。然后，這使得鏈接填充它的父元素，然后在 css 中使用 height:100% 的 .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;
}
- 2 回答
- 0 關注
- 193 瀏覽
添加回答
舉報
0/150
提交
取消