Question

我目前将导航栏固定在页面底部，并且列表已堆叠。像这样：

<nav class="navbar navbar-fixed-bottom">
  <ul class="nav nav-pills nav-stacked">
   <li>stuff 1</li>
   <li>stuff 2</li>
  </ul>
</nav>

如果屏幕宽度大于320px，我怎样才能使导航栏不再固定在底部而是固定在页面的左侧（我想使用navbar-fixed-left）？

这似乎不可能通过媒体查询，所以我想我必须使用javascript或SASS？（我知道很少有javascript，而且对SASS一无所知，所以我想我会先问这是否是我想要解决这个问题的路线。）

谢谢！

Answer 1

如何才能使导航栏不再固定在底部但固定在页面的左侧（我猜是使用 navbar-fixed-left）如果屏幕宽度大于320px？

您使用媒体查询执行此操作，但不更改类名，您可以更改该类的属性。

例如

（刚刚开始）

.navbar-fixed {
  position:fixed;
  left:auto;
  bottom:0;
}
@media(min-width:320px) {
  // this will retain the properties declared above
  .navbar-fixed { // only add new properties of ones you want to change
    left:0;
    bottom:auto;
  }
}

Answer 2

使用jQuery：

<强>的Javascript

var navResponsive = function() {
    if ($(window).width() > 320) {
        $('.navbar').addClass('navbar-fixed-left').removeClass('navbar-fixed-bottom');
    } else {
        $('.navbar').addClass('navbar-fixed-bottom').removeClass('navbar-fixed-left');
    }
};

$(window).on('resize', navResponsive());

ACCESS_COARSE_LOCATION

如何根据屏幕宽度将导航栏类更改为另一个导航栏类？

2 个答案: