Bootstrap 4-固定边距的粘性导航栏 [英] Bootstrap 4 - Sticky Navbar with fixed margin
本文介绍了Bootstrap 4-固定边距的粘性导航栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试实现边距为0.5em的导航栏.到目前为止(您可以看一下此Codepen: https://codepen.io/diegomengue/pen/yXboQg )，当您滚动页面时，页边距会丢失.有没有办法让导航栏保持页边空白?
I'm trying to implement a navbar that has a 0.5em margin-top. As of now (you can take a look at this codepen: https://codepen.io/diegomengue/pen/yXboQg), when you scroll the page, the margin goes missing. Is there a way to keep the margin sticky with the navbar?
我正在使用引导程序4.
I'm using 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
这篇关于Bootstrap 4-固定边距的粘性导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
