将固定顶部导航栏变为断点处的静态顶部导航栏

Question

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

Answer 1

首先，您的课程有误，应该是navbar-fixed-top和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;
}