如何使用 Bootstrap 在动态折叠中始终显示前两行？

Bootstrap 是一款非常流行的前端框架，可以快速构建响应式的网站和应用程序。在 Bootstrap 中，折叠是一个非常常见的 UI 组件，可以方便地显示和隐藏内容。但是，在某些情况下，您可能希望在折叠中始终显示前两行内容。在本文中，我将向您介绍如何通过使用一些简单的 CSS 和 JavaScript 代码来实现这一目标。

HTML 结构

首先，我们需要添加 HTML 结构以创建一个具有折叠功能的元素。下面是一个示例：

<div class="card">
  <div class="card-header" id="headingOne">
    <h5 class="mb-0">
      <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        折叠标题
      </button>
    </h5>
  </div>

  <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
    <div class="card-body">
      折叠内容
    </div>
  </div>
</div>

在这个示例中，我们使用了 Bootstrap 的 .card 类来创建一个卡片元素。.card-header 元素包含一个按钮，当点击时会折叠或展开其中的内容。.card-body 元素是折叠内容的容器。

CSS 样式

接下来，我们需要添加 CSS 样式来控制折叠元素。我们要使用的样式类如下：

.collapsed .card-body:not(:nth-child(-n+2)) {
  display: none;
}

这个样式类指定了当折叠元素被折叠时，所有 .card-body 元素除了前两个子元素（通过 :nth-child(-n+2) 选择器指定）将被隐藏。

JavaScript 代码

最后，我们需要添加一些 JavaScript 代码来初始化折叠元素：

$(function () {
  $('.collapse').on('shown.bs.collapse', function () {
    $(this).parent().find('.card-header .btn').addClass('active');
  });

  $('.collapse').on('hidden.bs.collapse', function () {
    $(this).parent().find('.card-header .btn').removeClass('active');
  });

  // 初始时折叠元素被折叠
  $('.collapse').collapse('hide');
})

这个代码使用 jQuery 库，它将在折叠元素展开和折叠时添加或删除一个 .active 类名，使按钮更加美观。最后一行代码将初始化折叠元素，并将其折叠隐藏。

总结

现在，您已经学会如何在 Bootstrap 中设置动态折叠，使前两行始终可见。使用一些简单的 CSS 和 JavaScript 代码，您可以轻松地实现这一功能。希望这篇文章对您有所帮助！