Bootstrap 4 - 具有固定边距的粘性导航栏答案

【问题标题】：Bootstrap 4 - Sticky Navbar with fixed marginBootstrap 4 - 具有固定边距的粘性导航栏
【发布时间】：2017-06-21 05:46:02
【问题描述】：

我正在尝试实现一个顶部边距为 0.5em 的导航栏。截至目前（您可以查看此代码笔：https://codepen.io/diegomengue/pen/yXboQg），当您滚动页面时，边距会丢失。有没有办法让导航栏的边距保持粘性？

我正在使用引导程序 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;
}

非常感谢！

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

添加

.sticky-top { top: 0.5em; }

到您的 CSS。

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

【讨论】：

哦，很简单！谢谢！