Bootstrap 数据放置基于 window 宽度

Question

我正在寻找一种简单的方法来根据 bootstrap 中弹出窗口的 window 宽度更改我的数据放置属性。下面是我当前的 html 和 jquery 代码。它有效，但是当我调整 window 大小时，我的弹出窗口的数据放置不会改变。只有当我用 window 小尺寸刷新页面时它才真正起作用。

<a class="arrow" id="arrow" data-toggle="popover" data-content=""><span class="glyphicon glyphicon-menu-right" id="glyph"></span></a>

    <script>
    $(window).resize(function(){
   console.log('resize called');
   var width = $(window).width();
   console.log(width);
   if(width < 974){
       $('#glyph').removeClass('glyphicon-menu-right').addClass('glyphicon-menu-down');
       $('#arrow').attr('data-placement','bottom');
       $('.myInfo').css("margin-top", "10px");
       $('.myInfo').css("margin-left", "30px");
   }
   else if(width > 974){
       $('#glyph').removeClass('glyphicon-menu-down').addClass('glyphicon-menu-right');
       $('#arrow').attr('data-placement','right');
       $('.myInfo').css("margin-top", "60px");
       $('.myInfo').css("margin-left", "40px");
   }
})

    .resize();
     </script>

一切正常，除非我更改页面宽度并再次单击弹出按钮。数据放置不会改变。建议？提前致谢！

Answer 1

this question answered by bchhun

的副本

作为函数传入放置位置：

var options = {
    placement: function (context, source) {
        if ($(window).width() < 974) {
            return "bottom";
        } else {
            return "right";
        }
    }
};
$("[data-toggle=popover]").popover(options); 
$(window).resize(function(){
    var width = $(window).width();
    if(width < 974){
        $('#glyph').removeClass('glyphicon-menu-right').addClass('glyphicon-menu-down');
        $('.myInfo').css("margin-top", "10px");
        $('.myInfo').css("margin-left", "30px"); 
    }
    else if(width > 974){
        $('#glyph').removeClass('glyphicon-menu-down').addClass('glyphicon-menu-right');
        $('.myInfo').css("margin-top", "60px");
        $('.myInfo').css("margin-left", "40px"); 
    }
})
.resize();

这 Bootply 表明它有效。希望这对您有所帮助！

Bootstrap 数据放置基于 window 宽度

Bootstrap data-placement based on window width

html

jquery

popover

placement

twitter-bootstrap