基于文本调整Bootstrap折叠按钮高度

Bootstrap 的折叠按钮（Collapse）组件允许你创建可折叠的内容区域。如果你需要调整折叠按钮的高度，可以通过自定义 CSS 来实现。以下是一些基础概念和相关步骤：

基础概念

Bootstrap 折叠组件：这是一个用于创建可折叠内容区域的组件，通常与按钮或链接一起使用。
CSS 样式：通过 CSS 可以自定义 HTML 元素的外观，包括高度、宽度、颜色等。

调整高度的步骤

HTML 结构：确保你的 HTML 结构正确，包含触发器和折叠内容。
自定义 CSS：编写自定义 CSS 来调整折叠按钮的高度。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Collapse Height Adjustment</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 自定义 CSS */
    .custom-collapse .btn {
      height: 60px; /* 设置按钮高度 */
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <button class="btn btn-primary custom-collapse" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      折叠按钮
    </button>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        这里是折叠内容。
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

CSS

.custom-collapse .btn {
  height: 60px; /* 设置按钮高度 */
}

解释

HTML 部分：
- 使用 Bootstrap 的 btn 类创建一个按钮。
- 使用 data-toggle="collapse" 和 data-target="#collapseExample" 属性来关联按钮和折叠内容。
CSS 部分：
- 通过 .custom-collapse .btn 选择器，设置按钮的高度为 60px。