我如何在頁面調整大小時禁用引導彈出窗口

Question

我正在使用bootstrap popover作為drop down菜單。 有什么方法可以通過css media queries或通過jquery在頁面調整大小時禁用popover功能，並使菜單在移動視圖中可見和垂直。

這是我嘗試過的：

<a href="#"  id="ble" class="ved" data-placement="bottom" data-toggle="popover" data-content='
<ul class="nav nav-pill">
<li><a href="#" >home</a></li>
 <li><a href="#" >home</a></li>
 </ul>
 '>Toggle popover</a>
</div>
 <script>
 $(document).ready(function(){
$('#ble').popover({html:true}); 
$(window).on('resize', function () {
if ($window.width() > 300) {
   $('#ble').unbind('popover');
 }
  });
     });     

Answer 1

如果您要處理來自CSS的媒體查詢，將會更加容易。

@media (max-width: 300px) {
   #ble {display: none;}
}

Answer 2

使用matchMedia-以上IE10的支持。

if (window.matchMedia("(min-width: 400px)").matches) {
   $('#element').popover('hide'); // Hides popover
   $('#element').popover('destroy') //Destroys 
} else {
  activate the popup here
}

將https://github.com/paulirish/matchMedia.js/用於matchMedia polyfill