Bootstrap词缀 - 无法向下滚动时隐藏图像元素

Question

当我向下滚动时，我想要隐藏大徽标并展示小徽标

<div class="row clearfix" >
  <div class="col-md-12 column">
    <nav class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="10">
      <div class="navbar-header"> <a class="big_logo" href="#"><img src="img/logo.png" alt="logo"></a><a class="small_logo" href="#"><img src="img/logo_small.png" alt="logo_small"></a></div>
    </nav>
  </div>
</div>

我不知道我在CSS中弄乱了什么：

.big_logo {
}
.big_logo.affix {
        display:none;
}
.small_logo {
        display:none;
}
.small_logo.affix {
}

Answer 1

您希望.big_logo和.small_logo获得课程.affix。它是data-spy="affix"实际获得.affix类的元素，因此您需要将CSS选择器修改为 .affix .big_logo 而不是 .big_logo.affix < / strong>像这样：

.small_logo {
    display: none;
}
.affix .small_logo {
    display: block;
}
.affix .big_logo {
    display: none;
}