如何将我的图像包含在 Bootstrap Accordion 中，以便它位于 Accordion-item 中

Question

我在使用 Bootstrap 手风琴时遇到问题。它功能正常，但是当我尝试加载图像时

<img src="https://placehold.co/600x400" class="img-fluid" />

在手风琴项目内

<div class="accordion-item">

它与文本一样不适合该区域。我创建了一支示例笔来展示。第二个手风琴项目有一个薄薄的灰色顶部边框/分隔符[与任何后续项目一样]。正如您所期望的，我添加到第一个手风琴项目的任何文本都会导致该边框降低。但是当我包含一个 img 时，它不会强制手风琴项目高度增加，并且 img 会重叠。

希望您能用示例笔清楚地明白我的意思。

有人可以帮助并建议我做错了什么吗？

谢谢

Answer 1

考虑将accordion-body div 的显示属性更改为grid 或flex。此调整允许额外的样式选项和自定义，它将解决您的问题。

.accordion-body {
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
  display: flex;
}