Можно ли изменить положение всплывающих окон Bootstrap в зависимости от ширины экрана?

У меня есть список элементов, и с каждым из них связано всплывающее окно Bootstrap (документы здесь). Инициируются они так:

$('#my_list li').popover({
   placement: 'left'
});

Это работает, но при небольшой ширине всплывающее окно теряется из области просмотра. Я хотел бы сделать размещение условным на основе $(document).width();, однако я не вижу способа переопределить начальные параметры (например, при ширине около 1000 пикселей переключите размещение на «выше»).

Я собрал упрощенную версию здесь на jsfiddle. Большое спасибо.


javascript jquery twitter-bootstrap
person CherryFlavourPez    schedule 17.11.2011    source источник

Ответы (2)


arrow_upward
20
arrow_downward

размещение также может принимать функцию в качестве значения. В этой функции вы можете вернуть соответствующее значение в зависимости от ширины области просмотра. Например.

$(document).ready(function(){
    $('#my_list li').popover({
        placement: wheretoplace
    });
});
function wheretoplace(){
    var width = window.innerWidth;
    if (width<500) return 'bottom';
    return 'left';
}
person spicavigo    schedule 17.11.2011
comment
не работает. popover все еще идет под краем. я использую БС3 - person Jitendra Vyas; 20.04.2014

arrow_upward
0
arrow_downward

Его изменение размещения слева направо в окне меньше 768

placement: function(){return $(window).width()>768 ? "auto left":"auto top";}
person Mohsen    schedule 04.03.2017