2017-04-19 58 views
0

我有下面的html代码来使用bootstrap在我的网页上添加下拉菜单。Bootstrap下拉不能在php codeigniter中工作

<div class="dropdown"> 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Dropdown 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2"> 
    <button class="dropdown-item" type="button">Action</button> 
    <button class="dropdown-item" type="button">Another action</button> 
    <button class="dropdown-item" type="button">Something else here</button> 
    </div> 
</div> 

    </div> 


    <script src="<?php echo base_url('assets/js/bootstrap.js'); ?>" type="text/javascript"></script> 
    <script src="<?php echo base_url('assets/js/jquery-3.2.1.min.js'); ?>"></script>   

    <link href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>" rel="stylesheet" type="text/css"/>  
    <link href="<?php echo base_url('assets/css/bootstrap.css'); ?>" rel="stylesheet" type="text/css"/>   

     </body> 

运行此代码,我得到的所有是灰色按钮,单击按钮上没有下拉列表。

我与codeigntier框架内工作并增加资产目录中的所有js和css文件在项目

可以请这个人帮助吗?

非常感谢。

注意:我可以在此页面上为其他控件使用引导程序。只有下拉菜单似乎有问题。

+0

CSS链接属于你的HTML – Yolo

+0

上面我已经试过了。还有同样的问题 –

+0

你可以试试<?php echo site_url()。'assets/js/bootstrap.js'; ?>在脚本 –

回答

2

您需要尝试使用此代码而不是下拉代码。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    
 
    <div class="dropdown"> 
 
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example 
 
<span class="caret"></span></button> 
 
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
 

 
</ul> 
 

 
</body> 
 
</html>

+0

它的工作。所以我使用的代码不正确?我从bootstrap网站获得了它。 –

+0

是的这是不正确的。 –

0

你只能创建一个错误

将您的jQuery用正确的顺序,所有的第一你必须把jQuery的核心文件,因为自举JS完全取决于jquery核心js。下面

是正确的顺序

// Place your stylesheet in header with this order 

<link href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>" rel="stylesheet" type="text/css"/> 
<link href="YOUR CUSTOM CSS FILE URL" rel="stylesheet" type="text/css"> //place here your custom style url 

// Place your script in footer with this order 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="YOUR CUSTOM JAVASCRIPT FILE URL" type="text/javascript"></script>