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

Question

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

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 中，在 Bootstrap CSS 之后。

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