更改屏幕时隐藏导航栏上的元素's宽度

Hide elements on navbar when changing screen's width

本文关键字:元素 宽度 屏幕 隐藏 导航      更新时间:2023-09-26

我目前使用Bootstrap v3.3.0,我希望当用户更改屏幕宽度时,导航栏的最后元素(下拉列表前的链接)会消失并添加到下拉列表中。我可以用Bootstrap或任何JS库做到这一点吗?

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

提前谢谢。

您可能应该使用以下方法:在普通菜单和下拉菜单中添加两次。然后在CSS中根据需要显示或隐藏它们。

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

使用Jquery函数

$(window).on("orientationchange load resize", function () {
     var width = $(document).width();
     if(width<765){
          // $("#elementID").hide();
          //  code for other elements hide stuff
     }
     else if(width>765){
          // for show iamges
     }
});