为什么jQuery与jQuery Mobile冲突？

Question

我的HTML页面中包含的库是

<link rel="stylesheet" href="css/main.css">       
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/style.css" rel="stylesheet" />
<!-- Modernizer Script for old Browsers -->
<script src="js/modernizr-2.6.2.min.js"></script>
<script src="/socket.io/node_modules/socket.io-client/socket.io.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/jquery.mobile.1.4.5.min.js"></script>
<!-- Single Page Nav -->
<script src="js/jquery.singlePageNav.min.js"></script>
<!-- jquery.fancybox.pack -->
<script src="js/jquery.fancybox.pack.js"></script>
<!-- Owl Carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- jquery easing -->
<script src="js/jquery.easing.min.js"></script>
<!-- Fullscreen slider -->
<script src="js/jquery.slitslider.js"></script>
<script src="js/jquery.ba-cond.min.js"></script>
<!-- onscroll animation -->
<script src="js/wow.min.js"></script>
<!-- Custom Functions -->
<script src="mzaes.js"></script>
<script src="js/main.js"></script>

在包含

之前的网页中

js/jquery.mobile.1.4.5.min.js
and
css/jquery.mobile-1.4.5.min.css

bootstrap模态窗口就像这个模态窗口

和滑块（输入范围）是这样的

但是在添加这两个库之后就变成了这样 和

为什么会这样？问题是什么？

Answer 1

将data-role="none"添加到您不希望由jQueryMobile设置样式的任何元素

您也可以参考此问题

https://stackoverflow.com/a/21185237/1771795