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

本文介绍了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;
}

非常感谢！

边距

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

问题描述

推荐答案