is your jQuery file and bootstrap file referenced in the wrong order? Reference the jQuery, first and then the bootstrap.js file.

check whether there is overflow:hidden;

bootstrap is mainly a reference to the class name, your li does not add the class name, so your reference is useless, you can try to name it according to the class of the document

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="true">
          Dropdown
          <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="-sharp">Action</a></li>
    <li><a href="-sharp">Another action</a></li>
    <li><a href="-sharp">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="-sharp">Separated link</a></li>
  </ul>
</div>

take a closer look at the official instance, you will find that you have not written several properties of the component

it is possible that your jq or js did not quote the
recommended connection accelerated by the new cdn

  
 problem solved, I was stupid. Bootstrap, was quoted once in head < / body > before, which should have caused the conflict, so it was invalidated 
.