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

Question

我目前正在使用Bootstrap v3.3.0，我想当用户更改屏幕宽度时，导航栏的最后一个元素（下拉列表前的LINK）消失并添加到下拉列表中。 我可以使用Bootstrap或任何JS库吗？

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

提前致谢。

Answer 1

您应该使用以下方法： 添加它们两次，因此在普通菜单和下拉列表中。然后在CSS显示中或在需要时隐藏它们。

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

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

Answer 2

使用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
     }
});