引导程序：模板示例不起作用-按钮不起作用

Question

I'm trying to make this bootstrap collapsible sidebar template work, but can't. 我正在尝试使此 Bootstrap可折叠侧边栏模板正常工作，但是不能。 It looks like it's supposed to look, but doesn't react on button presses, even though I've downloaded the "Compiled CSS and Js" from https://getbootstrap.com/docs/4.1/getting-started/download/ and jquery and included it like this: 尽管我已经从https://getbootstrap.com/docs/4.1/getting-started/download/下载了“ Compiled CSS and Js”，但看起来好像应该看起来一样，但是对按钮的按下没有反应。 jQuery，并包括这样：

<html>
  <head>
     <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-4.1.3/css/bootstrap.css">
     <script src="${pageContext.request.contextPath}/bootstrap-4.1.3/js/bootstrap.js"></script>
     <script src="${pageContext.request.contextPath}/bootstrap-4.1.3/js/jquery-3.3.1.min.js"></script>

     <style>style from template</style>
     <script>script from template</script>
  </head>

  <body>
    body from template
  </body>

</html>

When I click on collapse or on any position on the menu it doesn' react at all, as opposed to the correct reaction one can see in template. 当我单击折叠或菜单上的任何位置时，它完全没有反应，这与模板中可以看到的正确反应相反。

Why does this happend and how to fix it? 为什么会发生这种情况以及如何解决？

EDIT : Real link: https://www.codeply.com/go/3e0RAjccRO/bootstrap-4-collapsing-sidebar-menu 编辑：真实链接： https : //www.codeply.com/go/3e0RAjccRO/bootstrap-4-collapsing-sidebar-menu

Answer 1

Although your provided link (5th word in question) doesn't point to any starter template. 尽管您提供的链接（有问题的第5个字）没有指向任何入门模板。 If you're talking about collapsible sidebar as shown in screenshot below: 如果您正在谈论可折叠的侧边栏，如下面的屏幕截图所示：

Then its working for me. 然后它为我工作。 All I've done is added missing link for font-awesome css. 我所做的只是添加了字体真棒CSS的缺少link 。 See the complete code snippet below: 请参见下面的完整代码段：

 #sidebar .list-group-item { border-radius: 0; background-color: #333; color: #ccc; border-left: 0; border-right: 0; border-color: #2c2c2c; white-space: nowrap; } /* highlight active menu */ #sidebar .list-group-item:not(.collapsed) { background-color: #222; } /* closed state */ #sidebar .list-group .list-group-item[aria-expanded="false"]::after { content: " \\f0d7"; font-family: FontAwesome; display: inline; text-align: right; padding-left: 5px; } /* open state */ #sidebar .list-group .list-group-item[aria-expanded="true"] { background-color: #222; } #sidebar .list-group .list-group-item[aria-expanded="true"]::after { content: " \\f0da"; font-family: FontAwesome; display: inline; text-align: right; padding-left: 5px; } /* level 1*/ #sidebar .list-group .collapse .list-group-item { padding-left: 20px; } /* level 2*/ #sidebar .list-group .collapse > .collapse .list-group-item { padding-left: 30px; } /* level 3*/ #sidebar .list-group .collapse > .collapse > .collapse .list-group-item { padding-left: 40px; } @media (max-width:48em) { /* overlay sub levels on small screens */ #sidebar .list-group .collapse.in, #sidebar .list-group .collapsing { position: absolute; z-index: 1; width: 190px; } #sidebar .list-group > .list-group-item { text-align: center; padding: .75rem .5rem; } /* hide caret icons of top level when collapsed */ #sidebar .list-group > .list-group-item[aria-expanded="true"]::after, #sidebar .list-group > .list-group-item[aria-expanded="false"]::after { display:none; } } /* change transition animation to width when entire sidebar is toggled */ #sidebar.collapse { -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s; } #sidebar.collapsing { opacity: 0.8; width: 0; -webkit-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-property: width; -o-transition-property: width; transition-property: width; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container-fluid"> <div class="row"> <div class="col-md-3 col-1 pl-0 pr-0 collapse fade show" id="sidebar"> <div class="list-group panel"> <a href="#menu1" class="list-group-item collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-dashboard fa-fw"></i> <span class="ml-1 hidden-sm-down"> Item 1</span> </a> <div class="collapse" id="menu1"> <a href="#menu1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 1 </a> <div class="collapse" id="menu1sub1"> <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 1 a</a> <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 2 b</a> <a href="#menu1sub1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 3 c </a> <div class="collapse" id="menu1sub1sub1"> <a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.1</a> <a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.2</a> </div> <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 4 d</a> <a href="#menu1sub1sub2" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 5 e </a> <div class="collapse" id="menu1sub1sub2"> <a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.1</a> <a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.2</a> </div> </div> <a href="#" class="list-group-item" data-parent="#menu1">Subitem 2</a> <a href="#" class="list-group-item" data-parent="#menu1">Subitem 3</a> </div> <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-film fa-fw"></i> <span class="ml-1 hidden-sm-down"> Item 2</span></a> <a href="#menu3" class="list-group-item collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-book fa-fw"></i> <span class="ml-1 hidden-sm-down"> Item 3 </span></a> <div class="collapse" id="menu3"> <a href="#" class="list-group-item" data-parent="#menu3">3.1</a> <a href="#menu3sub2" class="list-group-item" data-toggle="collapse" aria-expanded="false">3.2 </a> <div class="collapse" id="menu3sub2"> <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 a</a> <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 b</a> <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 c</a> </div> <a href="#" class="list-group-item" data-parent="#menu3">3.3</a> </div> <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-heart fa-fw"></i> <span class="ml-1 hidden-sm-down">Item 4</span></a> <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-list fa-fw"></i> <span class="ml-1 hidden-sm-down">Item 5</span></a> <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-clock-o fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a> <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-th fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a> <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-gear fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a> <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-calendar fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a> <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-envelope fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a> <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-bar-chart-o fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a> <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-star fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a> </div> </div> <main class="col-md-9 col-11 pl-2 pt-2"> <a href="#sidebar" data-toggle="collapse" class="m-2"><i class="fa fa-navicon fa-2x text-muted"></i></a> <div class="page-header"> <h1>Bootstrap 4 Sidebar Menu</h1> </div> <p class="lead">A responsive, multi-level vertical accordion.</p> </main> </div> </div> <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+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

引导程序：模板示例不起作用-按钮不起作用

问题描述

1 个解决方案

解决方案1
1 2018-10-28 15:28:00

引导程序：模板示例不起作用-按钮不起作用

问题描述

1 个解决方案

解决方案1 1 2018-10-28 15:28:00

解决方案1
1 2018-10-28 15:28:00