更改屏幕宽度时在导航栏上隐藏元素 [英] Hide elements on navbar when changing screen's width

问题描述

我当前使用的是Bootstrap v3.3.0，我希望在用户更改屏幕宽度时，导航栏的最后一个元素(下拉列表之前的LINK)消失并添加到下拉列表中. 我可以使用Bootstrap或任何JS库吗?

I'm currently use Bootstrap v3.3.0 and i would like when user change the width of screen, the last elements of the navbar (LINKs before dropdown list) disappear and be added at the dropdown list. Can I do that with Bootstrap or any JS library ?

导航栏示例: http://getbootstrap.com/examples/navbar/

谢谢.

推荐答案

您可能应该使用以下方法: 将它们添加两次，因此在普通菜单和下拉菜单中.然后在CSS中显示或在需要时将其隐藏.

You should probably use the following approach: Add them twice, so in the normal menu and in the dropdown. Then in CSS display or hide them when needed.

    @media (min-width: 768px) {
    #item_link1
    {
        display:none;
    }
}

@media (max-width: 768px) {
    #item_link2
    {
        display:none;
    }
}

这篇关于更改屏幕宽度时在导航栏上隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！