bootstrap-4 - 如何在 Bootstrap 4 导航栏中将大型设备上的置顶位置更改为小型设备上的固定顶部？

Question

您能否告诉我是否有任何方法可以将导航栏的位置从大型设备上的置顶更改为小型设备上的固定顶部。

<nav id="menu" class="navbar sticky-top navbar-expand-md navbar-dark bg-dark">

标签： bootstrap-4

Answer 1

您可以使用 CSS 媒体查询来定位小型设备。

将此添加到您的样式表中，它应该可以完成这项工作。确保将样式表添加到 bootstrap.css 文件下方。

// Small devices
@media (max-width: 767px) { 

  #menu sticky-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
  }
}