gpt4 book ai didi

html - Bootstrap 4 - 固定边距的粘性导航栏

转载 作者:太空宇宙 更新时间:2023-11-04 13:51:03 25 4
gpt4 key购买 nike

我正在尝试实现一个顶部边距为 0.5em 的导航栏。截至目前(您可以查看此代码笔:https://codepen.io/diegomengue/pen/yXboQg),当您滚动页面时,边距消失了。有没有办法让边距与导航栏保持一致?

我正在使用 bootstrap 4。

代码:

HTML:
<body>
<nav class='navbar navbar-toggleable-xl mx-auto sticky-top'>
<ul class='navbar-nav mx-auto'>
<li class='nav-item'><a href='#'>Sobre mim</a></li>
<li class='nav-item'><a href='#'>Portfólio</a></li>
<li class='nav-item'><a href='#'>Contato</a></li>
</ul>
</nav>
</body>

CSS:
body {
height: 1000px;
}
.navbar{
margin-top: 0.5em;
background-color: #4B589D;
width: 87%;
border-radius: 3px;
box-shadow: 0 0 10px grey;
}

li {
padding: 0.3em 0.3em 0.3em 0.3em;
margin: 0 0.3em 0 0.3em;
}

a {
color: white;
}

非常感谢!

最佳答案

添加

.sticky-top { top: 0.5em; }

到你的 CSS。

https://codepen.io/anon/pen/GEmMrJ

关于html - Bootstrap 4 - 固定边距的粘性导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44663517/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com