bootstrap胶囊式组件怎么设置第三个标签为默认

Bootstrap 的胶囊式组件（Card Pill）通常是指卡片上的小标签，它们用于分类或标记信息。如果你想让第三个标签默认选中，你可以通过 CSS 或 JavaScript 来实现。这里是一个简单的例子：

1. **CSS** (如果标签有明确的 ID)：
如果每个标签都有唯一的 `data-pills` 属性，可以这样选择并设置样式：

   .card.pill-group #third-pill {
     border-color: primary; /* 更改颜色以表示默认 */
     background-color: rgba(0, 0, 0, 0.1); /* 可选，默认背景颜色轻微变化 */
   }

2. **JavaScript** (using jQuery为例):

   $('#your-card').on('shown.bs.collapse', '.card-collapse', function () {
     if ($(this).attr('id') === 'third-collapsible') { // 确保是第三个折叠面板
       $(this).prev().tab('show'); // 显示前一个标签（即第三个标签）
     }
   });

3. **HTML** 示例：

   <div class="card">
     <ul class="card-pills">
       <li data-bs-target="#first-collapsible" href="#first-collapsible"><a>第一个</a></li>
       <li data-bs-target="#second-collapsible" href="#second-collapsible"><a>第二个</a></li>
       <li data-bs-target="#third-collapsible" class="active" href="#third-collapsible"><a>第三个</a></li>
     </ul>
     <!-- 这里是对应的折叠内容 -->
   </div>

在这个例子中，当你打开第四个（实际上是第三个）折叠面板时，你会看到它的前一个标签会自动激活。