Question

有没有办法让我使用jquery移动脚本而不会在我的bootstrap 3上发生冲突？我的问题是当我使用Jquery移动脚本时，我的链接无效，但每当我删除脚本时，我的链接工作正常。我使用Jquery mobile作为我的弹出功能。我是一个关于jquery和bootstrap web开发的新手，如果我的问题看起来太新手了，我道歉。我的案例中的任何帮助都非常感谢。

＆＃13;

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>

<style> 
body {
  padding: 20px 50px 150px;
  font-size: 20px;
  text-align: center;
  
}

.jumbotron {
   margin-bottom: 40px !important;
   height: 350px !important;
   background-repeat: no-repeat;
   color: white;
   text-shadow: black 0.3em 0.3em 0.3em;
}

#picbg
{
 background: url('board.jpeg') no-repeat center center;
}
#container 
{
	margin: 0 auto;
	width: 850px;
	background: #fff;
	
}

</style>


<style>



.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; } 
*+html .centered-pills ul.nav-pills { display:inline; }

</style>

<body>

<div class="container">

<div class="jumbotron" id="picbg">
  <h1><font face = "brush script mt" color="#fff">My Page</font><h1></div>
</div>

<div class="row">
<div class="span12 centered-pills">
        <ul class="nav nav-pills" role="tablist">
        <li class="active"><a href="file:///C:/Users/page1.html"><span class="glyphicon glyphicon-home"></span><h2><b>Home</b></h2></a></li>
	<li><a href="file:///C:/Users/page4.html"><span class="glyphicon glyphicon-envelope"></span><h2><b>Contact Me</b></h2></a></li>
        
       <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <span class="glyphicon glyphicon-user"></span><h2><b>Profile</b></h2> </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="file:///C:/Users/page5.html"><h2><b>Web</b></h2></a></li>
            <li><a href="file:///C:/Users/page6.html"><h2><b>Author</b></h2></a></li>
         <li><a href="#myPopup" disabled="false" data-rel="popup" class="ui-btn" data-transition="fade" data-position-to="window" data-inline="true">About</a></b></h2></a></li>                        
          </ul>
        </li> 
     </ul>
    </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div data-role="popup" id="myPopup" class="ui-content" data-overlay-theme="a" data-theme="d" data-corners="false">
      <img class="popphoto" src="image1.png" style="width:600px;height:756px;" alt="">
    </div> 
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>

＆＃13;

Jquery移动脚本在bootstrap 3上发生冲突

0 个答案: