我通过在 <li>
标签中附加 style="bottom: o; position: fixed;"
来实现我目前可以实现的屏幕,如下所示:
<li style="bottom: 0; position: fixed; overlay: none;">
<a href="#"><i class="fa fa-fw fa-paper-plane-o"></i> Bottom Item</a>
</li>
但是,正如预期的那样,当用户的屏幕较小并且导航项目靠得更近时,它们会重叠 .
Smaller screen/zoomed in viewing
因此,如果屏幕较小,那么该项目将位于导航项目的底部,但如果它很大,那么它将被卡在底部 .
谢谢 .
1 回答
您应该从li中删除内联样式并将此CSS添加到项目中:
li
将保持在md
和lg
屏幕的底部,并将与sm
屏幕上的其余部分分组 . 如果您希望它也在md
上分组,请在上面的代码中将992px
更改为1200px
.演示: