Question

我一直在努力解决这个问题几天，现在尝试在线找到各种解决方案，但没有任何工作。我正在尝试用WordPress创建我的第一个Bootstrap 3站点。我想创建一个应该响应的垂直菜单。我能想到的唯一方法是将它放在侧边栏中吗？它工作正常，当然如果窗口调整大小菜单跳到底部我需要它到顶部。我在当地工作，所以我没有发布链接，但我希望有人可以给我一些建议吗？

这是根据教程假设工作的脚本：

<script type="text/javascript">
(function($) {
    var $window = $(window),
        $html = $('#menu-bar');

    $window.resize(function resize() {
        if ($window.width() < 768) {
           return $html.removeClass('nav-stacked');
        }
        $html.addClass('nav-stacked');
    }).trigger('resize');
})(jQuery);
</script>

更新

我已经接近解决方案了。它适用于下面的脚本，除非我将窗口调整为全宽度，菜单显示为全宽菜单，将页面上的其他内容向下推。

这可能是一个CSS问题吗？

$(window).resize(function(){ 
    if ($(window).width() <= 768){ 
        $(document).ready(function() { 
            $('#sidebar-nav').insertAfter('#myJumbotron'); 
        }); 
    } 
});

有人建议这可能是一个JS问题？有没有人知道更多？

未来用户的解决方案：

 $(function(){
 // initial size adjustments
  resizeMe();
 // Resized window!
  $(window).on("resize",function(){
    resizeMe();
   });
 });

 function resizeMe(){
  if ($(window).width() <= 768){  
   $('#sidebar-nav').insertAfter('#myJumbotron');
 }else{
   $("#sidebarBG").prepend($("#sidebar-nav"));
  }
 };

更改在Wordpress侧栏中使用Bootstrap 3构建的垂直菜单的堆叠顺序

0 个答案: