【问题标题】:Data target is not working with bootstrap 3数据目标不适用于引导程序 3
【发布时间】:2018-04-28 21:08:49
【问题描述】:
 header.php code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html lang="EN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="images/logo.jpg" type="image/x-icon" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/bootstrap.min.css" />
<link rel="stylesheet" href="styles/mystyles.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<script src="js/bootstrap.min.js" ></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

导航.php

<div class="navbar navbar-default" id="navbar">
<div class="container">
<div class="navbar-header">    
<a class="navbar-brand home" href="#">
<img src="images/ico.JPG" class="hidden-xs" style="height:50px;">
<img src="images/icosmall.png" class="visible-xs" height="50px" width="auto">
</a>    

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
    <span class="sr-only">Toggle Navigation</span>
    <i class="fa fa-align-justify"></i>
    </button>


    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#search">
    <span class="sr-only">Toggle Navigation</span>
    <i class="fa fa-search"></i>
    </button>

</div>  <!----end of navbar header--->  
<div class="navbar-collapse collapse" id="navigation">
<div class="padding-nav">
    <ul class="nav navbar-nav navbar-left">
    <li><a href="#">Colors</a></li>
    <li><a href="#">How-To</a></li>
    <li><a href="#">Inspiration</a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Contact Us</a></li>

</ul>      <!----end of navbar-left--->
</div>    <!----end of padding nav---> 
<a class="btn btn-primary navbar-btn right" href="#" >
    <i class="fa fa-shopping-cart"></i>
    <span>Cart 0</span>
</a>
<div class="navbar-collapse collapse right">
  <button class="btn navbar-btn btn-primary" type="button" data-toggle="collapse" data-target="#search">
    <span class="sr-only">Toggle Search</span>
    <i class="fa fa-search"></i>
    </button>  
</div>  <!----navbar-collapse collapse right ends here--->
<div class="collapse clearfix" id="search">
 <form class="navbar-form" method="get" action="results.php">
  <div class="input-group">
 <input class="form-control" type="text" placeholder="Search......" name="user_query" required />
 <span>
 <button type="submit" value="Search" name="search" class="btn btn-primary">    
  <i class="fa fa-search"></i>
</button>
</span>
 </div> <!----input-group ends here--->  

</form> <!----navbar-form ends here--->  
</div> <!----collapse clearfix ends here---> 
</div> <!----navbar-collapse ends here--->
</div> <!----end of container--->
</div> <!----end of navbar-navbar--->

index.php

<?php
include_once 'header.php';

?>

<?php
include_once 'nav.php';

?>


<div class="container" id="slider">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
 </ol> <!---carousel-indicators ends here ---->
<div class="carousel-inner">
<div class="item active">
<img src="admin_area/slide_images/1.jpg">
</div>  
<div class="item">
<img src="admin_area/slide_images/2.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/3.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/4.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/5.jpg">
</div>
</div> <!---carousel-inner ends here ---->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 <span class="sr-only">Previous</span> 
</a>   <!---left carousel-control ends here ---->

<a class="right carousel-control" href="#myCarousel" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 <span class="sr-only">Next</span> 
</a>   <!---right carousel-control ends here ---->


</div> <!---carousel slide ends here ---->
</div> <!---col-md-12 ends here ---->
</div> <!---container ends here ---->

<div class="advantages">
<div class="container">
<div class="same-height-row">
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i  class="fa fa-globe" aria-hidden="true"></i>    
</div>
<h3><a href="#">FAST GLOBAL SERVICE</a></h3>
<p>We are know to provide best possible service ever</p>
</div> <!---box same-height ends here ---->  
 </div> <!---col-sm-4 ends here ----> 
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i  class="fa fa-cc-paypal" aria-hidden="true"></i>    
</div>
<h3><a href="#">EASY AND SAFE TRANSACTION</a></h3>
<p>Encrypted payment gateway through PayPal</p>
</div> <!---box same-height ends here ---->
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i  class="fa fa-credit-card-alt" aria-hidden="true"></i>    
</div>
<h3><a href="#">NO INTERMEDIARIES</a></h3>
<p>Avoid any business with middlemen</p>
</div> <!---box same-height ends here ---->  
 </div> <!---col-sm-4 ends here ----> 



</div> <!---same-height-row ends here ----> 
</div> <!---container ends here ---->
</div> <!---advantages ends here ---->





<?php include_once 'footer.php'; ?>

这是我的完整代码。 这是我浏览器的截图 ScreenShot

当我点击搜索按钮时,我应该得到一个带有搜索框的下拉分区。但我不明白!我需要一个可以查看代码并帮助我解决问题的人。我目前正在处理周三到期的项目。

【问题讨论】:

  • 您的投票失败了,因为您的问题既不完整也不可验证。请阅读how to ask questions,以便我们能够为您提供适当的帮助。
  • @AndréDion 我是这个网站的新用户。我一直是活跃的观众,但现在我已经注册了。所以你能帮我提出正确的问题吗?我刚刚看了你的链接。
  • @AndréDion 检查已编辑的问题。希望问题足够描述性
  • 这可能就像将 jQuery 脚本移动到 Bootstrap 脚本之前一样简单,然后将两者都移动到 &lt;/body&gt; 之前的 per the documentation
  • @AndréDion 我应该从 head 部分删除我的 bootstrap.js 和 jquer.js 并将其放在

标签: php html css


【解决方案1】:

这是我的 footer.php 。我编辑了 header.php 并删除了 jquery 和 bootstrap.js,然后将其放在页脚

  <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js" ></script>
    </body>
    </html>

感谢您帮助我解决了我的问题。现在它完美地工作了。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-02-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-06-24
    • 1970-01-01
    相关资源
    最近更新 更多