Question

来自https://getbootstrap.com/docs/4.3/components/navbar/：

导航栏默认情况下是响应式的，但是您可以轻松地将其修改为改变它。响应行为取决于我们的JavaScript折叠插件。

好的，太好了。现在我在哪里找到Collapse JavaScript plugin？该文档页面未链接到该页面，https://getbootstrap.com/docs/4.3/getting-started/download/上的任何地方都未提及它，而且我无法通过Google搜索找到它。

Answer 1

我从https://getbootstrap.com/docs/4.3/getting-started/download/下载了bootstrap-4.3.1-dist.zip并检查了内容。在bootstrap.js文件中，我发现了这一点：

var NAME$3 = 'collapse';
var VERSION$3 = '4.3.1';
var DATA_KEY$3 = 'bs.collapse';

附带一堆其他似乎可以实现Collapse功能的代码。

因此，在假设文档错误以及这些“插件”实际上只是核心功能的假设下，我仔细检查了我的HTML。当我们将纯HTML示例转换为Slim语法时，发现了一个结构性错误，该错误导致折叠功能无法正常工作。

导航项的ul.navbar-nav.mr-auto列表不在您应放入的#navbarSupportedContent.collapse.navbar-collapse框中。

这是https://getbootstrap.com/docs/4.3/components/navbar/中示例的（正确结构化）Slim版本：

nav.navbar.navbar-expand-lg.navbar-light.bg-light
  a.navbar-brand href="#"  Navbar
  button.navbar-toggler aria-controls="navbarSupportedContent" aria-expanded="false" aria-label=("Toggle navigation") data-target="#navbarSupportedContent" data-toggle="collapse" type="button" 
    span.navbar-toggler-icon
  #navbarSupportedContent.collapse.navbar-collapse
    ul.navbar-nav.mr-auto
      li.nav-item.active
        a.nav-link href="#" 
          | Home
          span.sr-only (current)
      li.nav-item
        a.nav-link href="#"  Link
      li.nav-item.dropdown
        a#navbarDropdown.nav-link.dropdown-toggle aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" href="#" role="button" 
          | Dropdown
        .dropdown-menu aria-labelledby="navbarDropdown" 
          a.dropdown-item href="#"  Action
          a.dropdown-item href="#"  Another action
          .dropdown-divider
          a.dropdown-item href="#"  Something else here
      li.nav-item
        a.nav-link.disabled aria-disabled="true" href="#" tabindex="-1"  Disabled
    form.form-inline.my-2.my-lg-0
      input.form-control.mr-sm-2 aria-label="Search" placeholder="Search" type="search" /
      button.btn.btn-outline-success.my-2.my-sm-0 type="submit"  Search

因此，我的问题的答案是：仅包含bootstrap.js，而忽略文档中所有提及“插件”的内容。如果不起作用，则说明HTML结构或包含bootstrap.js的方式存在问题。如果某些“插件”有效，而其他的则无效，那么HTML结构肯定是有问题的。

Bootstrap文档误导性地称为“插件”的是库附带的核心功能。它们不是一般意义上的插件（您必须选择包括的附加，可选功能）。

在哪里可以获得Boostrap Collapse插件，以及如何设置它？

1 个答案: