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

【问题标题】：Hide elements on navbar when changing screen's width更改屏幕宽度时隐藏导航栏上的元素
【发布时间】：2014-12-13 18:33:22
【问题描述】：

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

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

提前致谢。

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

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

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

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

【讨论】：

谢谢你们。两种解决方案都效果很好，但我使用了第二种方法。

【解决方案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
     }
});

【讨论】：