Question

即时启动bootstrap，我一直在关注一些教程。我最近遇到了下拉菜单，但我似乎无法得到它。我已经搜索了我是否正确引用了bootstrap的答案，但看起来我认为它是正确的。

有人可以帮忙吗？

由于

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">"
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <title>Bootstrap 101 Template</title>    
  </head>
  
  <body>


    <div class= "header">
    	<h1>Hello, world!</h1>
    </div>
    
    <div class="container">
    	<div class="dropdown">
        	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="drop	down">
            	Cool Button<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
            	<li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>            
            </ul>
        </div>
    </div>
    <hr>

       
    <div class = "container3">
    	<div class = "row">	
                <div class"row">
					<div class="well">
                    	<a href=""class="btn">button</a>
                        <a href=""class="btn btn-primary">button</a>
                        <a href=""class="btn btn-success">button</a>
                        <a href=""class="btn btn-info">button</a>
                        <a href=""class="btn btn-warning">button</a>
                        <a href=""class="btn btn-danger">button</a>                       
                        <hr>
                                             	
                        <a href="" class="btn btn-lg btn-success">Gift Your Friends<br><span class ="glyphicon glyphicon-gift" ></span></a>
                    </div>                   
                </div>
            </div>                                                
        </div>
        
        <div class ="container">
        	<form action="">
            	<div class="form-group">
                	<label for="element 1">This is the text of the label</label>
                    <input type="text" id="element-1" class="form-control">
                </div>
            	<div class="form-group">
                	<label for="element 1">This is the text of the label 2</label>
                    <input type="text" id="element-1" class="form-control">
                </div>
             <p class="help-block">Enter your password with Capital letters and Numbers included</p>
            </form> 
            
            <hr>
            
        	<form action="" class ="form-inline">
            	<div class="form-group">
                	<label for="element 3"></label>
                    <input type="text" id="element-3" class="form-control" placeholder="Enter Email">
                </div>	
            	<div class="form-group">
                	<label for="element 4"></label>
                    <input type="password" id="element-4" class="form-control" placeholder="Enter Password">
                </div>
                <div class="checkbox"></div>
                <a href="" class ="btn btn-info">Sign In</a>
            </form>                       
        </div>    
    </div>     
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>	


  </body>
  
</html>

    <div class= "header">
        <h1>Hello, world!</h1>
    </div>

    <div class="container">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="drop down">
                Cool Button<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="">1ool</a></li>
                <li><a href="">2ool</a></li>
                <li><a href="">3ool</a></li>
                <li><a href="">4ool</a></li>            
            </ul>
        </div>
    </div>
    <hr>


    <div class = "container3">
        <div class = "row"> 
                <div class"row">
                    <div class="well">
                        <a href=""class="btn">button</a>
                        <a href=""class="btn btn-primary">button</a>
                        <a href=""class="btn btn-success">button</a>
                        <a href=""class="btn btn-info">button</a>
                        <a href=""class="btn btn-warning">button</a>
                        <a href=""class="btn btn-danger">button</a>                       
                        <hr>

                        <a href="" class="btn btn-lg btn-success">Gift Your Friends<br><span class ="glyphicon glyphicon-gift" ></span></a>
                    </div>                   
                </div>
            </div>                                                
        </div>

        <div class ="container">
            <form action="">
                <div class="form-group">
                    <label for="element 1">This is the text of the label</label>
                    <input type="text" id="element-1" class="form-control">
                </div>
                <div class="form-group">
                    <label for="element 1">This is the text of the label 2</label>
                    <input type="text" id="element-1" class="form-control">
                </div>
             <p class="help-block">Enter your password with Capital letters and Numbers included</p>
            </form> 

            <hr>

            <form action="" class ="form-inline">
                <div class="form-group">
                    <label for="element 3"></label>
                    <input type="text" id="element-3" class="form-control" placeholder="Enter Email">
                </div>  
                <div class="form-group">
                    <label for="element 4"></label>
                    <input type="password" id="element-4" class="form-control" placeholder="Enter Password">
                </div>
                <div class="checkbox"></div>
                <a href="" class ="btn btn-info">Sign In</a>
            </form>                       
        </div>    
    </div>     
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>   


  </body>

</html>

Answer 1

drop down之间有空格。它应该是data-toggle="dropdown"

此外，一旦加载了DOM，就必须在元素上调用dropdown()。

添加此项以实例化下拉列表。这应该有用。

$(document).ready(function(){
    $('.dropdown-toggle').dropdown();
})

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <title>Bootstrap 101 Template</title>    
  </head>
  
  <body>


    <div class= "header">
    	<h1>Hello, world!</h1>
    </div>
    
    <div class="container">
    	<div class="dropdown">
        	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            	Cool Button<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
            	<li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>            
            </ul>
        </div>
    </div>
    <hr>

       
    <div class = "container3">
    	<div class = "row">	
                <div class"row">
					<div class="well">
                    	<a href=""class="btn">button</a>
                        <a href=""class="btn btn-primary">button</a>
                        <a href=""class="btn btn-success">button</a>
                        <a href=""class="btn btn-info">button</a>
                        <a href=""class="btn btn-warning">button</a>
                        <a href=""class="btn btn-danger">button</a>                       
                        <hr>
                                             	
                        <a href="" class="btn btn-lg btn-success">Gift Your Friends<br><span class ="glyphicon glyphicon-gift" ></span></a>
                    </div>                   
                </div>
            </div>                                                
        </div>
        
        <div class ="container">
        	<form action="">
            	<div class="form-group">
                	<label for="element 1">This is the text of the label</label>
                    <input type="text" id="element-1" class="form-control">
                </div>
            	<div class="form-group">
                	<label for="element 1">This is the text of the label 2</label>
                    <input type="text" id="element-1" class="form-control">
                </div>
             <p class="help-block">Enter your password with Capital letters and Numbers included</p>
            </form> 
            
            <hr>
            
        	<form action="" class ="form-inline">
            	<div class="form-group">
                	<label for="element 3"></label>
                    <input type="text" id="element-3" class="form-control" placeholder="Enter Email">
                </div>	
            	<div class="form-group">
                	<label for="element 4"></label>
                    <input type="password" id="element-4" class="form-control" placeholder="Enter Password">
                </div>
                <div class="checkbox"></div>
                <a href="" class ="btn btn-info">Sign In</a>
            </form>                       
        </div>    
    </div>     
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>	

/* Instantiate the dropdown once DOM loaded.*/
<script> 
$(document).ready(function(){ 
    $('.dropdown-toggle').dropdown(); 
}); 
</script>
  
</body>
  
</html>

＆＃13;

Bootstrap下拉菜单无法正常工作

1 个答案: