html - 在 Bootstrap 中使用词缀的导航列表之后的图像

Question

我正在尝试将图像附加到导航列表的底部，并在页面滚动时让它停留在那里。

这就是我想要的:

这是词缀开始时我得到的:

我需要它保持图片一的状态。我尝试用谷歌搜索问题并搜索堆栈溢出但没有结果。

代码如下:

<!--SIDEBAR NAVIGATION -->
                <ul class="nav nav-list well hidden-phone hidden-tablet" data-spy="affix" data-offset-top="850"> 
                    <li class="nav-header">The Green Panda</li>
                    <li class="divider"></li> 
                    <li><a href="#whatwedo">What We Do</a></li> 
                    <li class="divider"></li> 
                    <li><a href="#oursolutions">Our Solutions</a></li> 
                    <li class="divider"></li> 
                    <li><a href="#morethanwebdesign">More Than Web Design</a></li>
                    <li class="divider"></li> 
                    <li><a href="#contactinfo">Contacting Us</a></li>
                </ul>
                <img src="img/woody-effect.png" class="img-bottom nav-list" data-spy="affix" data-offset-top="850">

Answer 1

编辑:

选择器不正确。

如果菜单的高度是静态的，您可以在切换到固定样式时向该图像添加一个类并应用此 css:

top: 310px;

这会将其置于菜单底部。

我会在 .affix 下设置一个类并将其应用于您的图像(添加 id panda_logo)

#panda_logo.affix {
    top: 310px
}