Bootstrap Hamburgar menu does not work

remain the sample code described in the External content chapter of the document as it is. When copied, the layout can be reproduced as an icon in the black header.
https://getbootstrap.com/docs/4.1/components/navbar/

However, even if you press the icon, you cannot expand the menu.
Do I need to configure something additional?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFooApmYm81iuXoPkFOJwJ8ERdknLPMO"crossorigin="anonymous";


<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark";
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controlls="navbarToggleExternalContent" aria-expanded="false>"Tangle="Toggle"
      <span class="navbar-toggler-icon">/span>
    </button>
  </nav>
</div>

html css bootstrap twitter-bootstrap

2022-09-30 11:00

1 Answers

Bootstrap implements JavaScript for dynamic page behavior, such as opening and closing modal windows and hamburger menus.For this reason, JavaScript files should be loaded accordingly as follows:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFooApmYm81iuXoPkFOJwJ8ERdknLPMO"crossorigin="anonymous";
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous">/script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"crossorigin="anonymous">/script;
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULty"crossorigin="anonymous"></script>

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark";
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controlls="navbarToggleExternalContent" aria-expanded="false>"Tangle="Toggle"
      <span class="navbar-toggler-icon">/span>
    </button>
  </nav>
</div>

2022-09-30 11:00

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656