Question

我有一个使用引导手风琴选项卡的FAQ页面。问题是我将它们以50/50的比例彼此相邻分开，但是现在当打开一个选项卡时，它旁边的一个选项卡也会打开（没有其内容）

示例：

这是我的html：

<div id="faqresult">
    <div class="col-md-12 animatedopen">
       <div class="vragen-wrapper">
         <div class="masonry-header">
          <h3 id="betalen">Betalen</h3>
         </div>
         <div class="masonry-vragen faqcontainer">
      
          <div class="card">
            <div class="card-header" id="heading1">
              <h5 class="mb-0">
                <button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
                  Welke betalingstermijn hanteren jullie?
                  <i class="fas fa-chevron-down"></i>
                </button>
              </h5>
            </div>
            <div id="collapse1" class="collapse " aria-labelledby="heading1" data-parent="#accordion">
              <div class="card-body">
                <p>Bij een eerste bestelling dient er vooruit betaald te worden, hierna is eventueel betaling mogelijk op factuur.</p>
              </div>
            </div>
          </div>
          
          <div class="card">
            <div class="card-header" id="heading2">
              <h5 class="mb-0">
                <button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                  Op welke manieren kan ik betalen?
                  <i class="fas fa-chevron-down"></i>
                </button>
              </h5>
            </div>
            <div id="collapse2" class="collapse " aria-labelledby="heading2" data-parent="#accordion">
              <div class="card-body">
                <p>De eerste bestelling altijd vooraf, daarna eventueel betaling mogelijk op factuur. Bij een eerste bestelling of betaling vooraf wordt een inschatting gemaakt van de verzendkosten. Deze zullen op basis van nacalculatie nogmaals berekend worden. Voor het verschil in kosten kan eventueel nog een aanvullende factuur volgen.</p>
              </div>
            </div>
          </div>
          
          <div class="card">
            <div class="card-header" id="heading3">
              <h5 class="mb-0">
                <button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                  Wanneer ontvang ik mijn factuur?
                  <i class="fas fa-chevron-down"></i>
                </button>
              </h5>
            </div>
            <div id="collapse3" class="collapse " aria-labelledby="heading3" data-parent="#accordion">
              <div class="card-body">
                <p>De factuur ontvang je na levering</p>
              </div>
            </div>
          </div>
          
         </div>
       </div>
    </div>
</div>

为什么我打开的手风琴旁边的手风琴也会改变高度？也许与我拆分它们的方式有关？

我应用了此CSS，将它们拆分为50/50：

#faqresult{
  width:100%;
}

.faqcontainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.faqcontainer .card{
  flex: 0 0 49.5%;
}

以下回答后的结果：

效果不错：

但是第二个没有：

Answer 1

您的* {{1}上的

align-items: flex-start;应该可以解决。

flex-start：项目的交叉起始边沿边缘放置在交叉起始线上

align-items具有默认模式拉伸：

拉伸（默认）：拉伸以填充容器（仍然遵守最小宽度/最大宽度）

更新

您可以像这样构造

.faqcontainer

具有这样的CSS

.container
  .column_container
    .card
    .card
  .column_container
    .card
    .card

打开靴式手风琴时，旁边的风琴也会改变高度

1 个答案: