css - 在断点处将固定顶部导航栏变成静态顶部导航栏

Question

我有一个很好用的固定顶部导航栏。当屏幕变小（比如 720 像素或更小）时，如何将固定顶部导航栏转换为静态顶部导航栏？

Answer 1

首先，您的课程是错误的，它们应该是navbar-fixed-topand navbar-static-top。其次，这是这些类的 Bootstrap 风格：

.navbar-static-top {
  border-width: 0 0 1px;
}

@media (min-width: 768px) {
  .navbar-static-top {
    border-radius: 0;
  }
}

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  border-width: 0 0 1px;
}

@media (min-width: 768px) {
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    border-radius: 0;
  }
}

您可以做的是在屏幕低于所需宽度的情况下将您希望它“变成” ( navbar-static-top) 的类中的样式应用到它是 () 的类上。navbar-fixed-top就我个人而言，我会坚持使用他们已经在使用的 768px，在这种情况下，将其添加到您的自定义 CSS 中，在引导 CSS 之后。

.navbar-fixed-top {
  position: relative;
  border-width: 0 0 1px;
}