我有一個(gè) Bootstrap 4 導(dǎo)航欄，我想為每個(gè)鏈接添加懸停效果。我添加了以下 css 來覆蓋標(biāo)準(zhǔn)樣式，這給出了我所追求的“有點(diǎn)”。將鼠標(biāo)懸停在鏈接上時(shí)，會(huì)顯示底部邊框，但也會(huì)在懸停時(shí)將文本向上推。它也不位于導(dǎo)航欄本身的底部。當(dāng)我使用 img 設(shè)置導(dǎo)航欄所在行的高度，然后將高度分割 50% 時(shí)，我想知道這是否就是我所面臨的？正如您從圖像中看到的，我希望橙色邊框位于導(dǎo)航欄的底部。到目前為止，當(dāng)我將鼠標(biāo)懸停在任何鏈接上時(shí)，整個(gè)文本會(huì)向上移動(dòng) 5px 左右，然后在不懸停時(shí)下降，這是我迄今為止所做的一個(gè)意想不到的結(jié)果。這是制作導(dǎo)航欄的代碼...<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貢獻(xiàn)1858條經(jīng)驗(yàn) 獲得超8個(gè)贊
為了防止當(dāng)您將鼠標(biāo)懸停在鏈接上時(shí)導(dǎo)航欄變大，請(qǐng)指定與 :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>
慕標(biāo)5832272
TA貢獻(xiàn)1966條經(jīng)驗(yàn) 獲得超4個(gè)贊
經(jīng)過一番挖掘后，我發(fā)現(xiàn)我需要將 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 - 我必須在鏈接中添加一個(gè) 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 關(guān)注
- 209 瀏覽
添加回答
舉報(bào)
0/150
提交
取消