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

我目前正在使用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 } });