发表新帖
发表新帖

Bootstrap dropdown not working

前端 未结
关注
24 949
孤城傲影
孤城傲影 2020-12-07 18:05

I can\'t make bootstrap dropdown to work. Here is my html for nav:

    
  
  • Home
    • 
  
  •
相关标签:
24条回答
  • 慢半拍i
    2020-12-07 18:39

    Working demo: http://codebins.com/bin/4ldqp73

    try this 

    <ul class='nav'>
  <li class='active'>Home</li>
  <li>
    <div class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">            
        <li><a href="#">asds</a></li>
        <li class="divider"></li>
      </ul>
    </div>   
    </li>
    <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>
    0 讨论(0)
  • 不要未来只要你来
    2020-12-07 18:40

    For me, it was a CORS issue. I removed crossorigin="anonymous" from my script importing tags, and it started working again.

    BTW the latest script tags, in the correct order, can always be found here: https://getbootstrap.com/

    Edit: Apparently adding defer to the script tag will also break all the Bootstrap goodies.

    0 讨论(0)
  • 醉酒成梦
    2020-12-07 18:41

    You'll have to check conflicting css files/properties for example you could have ".nav" custom style contents elsewhere try to disable your own css files and check if that works then check which file or custom style that makes the conflicts also make sure you are including the bootstrap.min.js in your code

    0 讨论(0)
  • 孤城傲影
    2020-12-07 18:43

    Check popper.js library because I had same problem, you can find bootstrap, jquery and popper CDNs for drop down on https://getbootstrap.com/ or jus copy the following script tags

    0 讨论(0)
  • 谎友^
    2020-12-07 18:44

    Add following lines within the body tags.

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files 
        as needed -->
  <script src="js/bootstrap.min.js"></script>
    0 讨论(0)
  • 余生分开走
    2020-12-07 18:45

    Try this code:

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap Tutorial</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <h1>Welcome to Bootstrap</h1>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题