代码之家  ›  专栏  ›  技术社区  ›  Madeirense

Bootstrap折叠元素行高度问题

  •  0
  • Madeirense  · 技术社区  · 5 年前

    在使用引导折叠元素时,是否有任何方法可以防止发生以下问题?

    Bootstrap collapse height issue

    这是我的代码:

    <div class="block-wrapper challenges-solutions">
      <div class="container">
        <div class="row">
    
      <div class="col-12 col-md-6">
        <div class="challenge-solution-header">
          <h3><i class="fab fas fa-file-contract"></i><span>Title 1</span></h3>
        </div>
        <div class="challenge-solution-body">
    
          <button class="btn challenges-btn" type="button" data-toggle="collapse" data-target="#expand-1" aria-expanded="false" aria-controls="expand-1">
            Challenge
          </button>
    
          <button class="btn solutions-btn" type="button" data-toggle="collapse" data-target="#expand-2" aria-expanded="false" aria-controls="expand-2">
             Solution
           </button>
    
        </div>
        <div class="challenge-solution-footer">
    
          <div class="collapse" id="expand-1">
            <div class="card card-body">
              Expand 1 text
            </div>
          </div>
    
          <div class="collapse" id="expand-2">
            <div class="card card-body">
              Expand 2 text
            </div>
          </div>
        </div>
      </div>
    
      <div class="col-12 col-md-6">
        <div class="challenge-solution-header">
          <h3><i class="fab fas fa-file-contract"></i><span>Title 2</span></h3>
        </div>
        <div class="challenge-solution-body">
    
          <button class="btn challenges-btn" type="button" data-toggle="collapse" data-target="#expand-3" aria-expanded="false" aria-controls="expand-1">
            Challenge
          </button>
    
          <button class="btn solutions-btn" type="button" data-toggle="collapse" data-target="#expand-4" aria-expanded="false" aria-controls="expand-2">
             Solution
           </button>
    
        </div>
        <div class="challenge-solution-footer">
    
          <div class="collapse" id="expand-3">
            <div class="card card-body">
              Expand 1 text
            </div>
          </div>
    
          <div class="collapse" id="expand-4">
            <div class="card card-body">
              Expand 2 text
            </div>
          </div>
        </div>
      </div>
      
    </div>
    

    以下是该问题的再现: jsfiddle

    我认为问题出在排课上。它将始终扩展侧柱以匹配高度。有办法防止这种情况吗?

    0 回复  |  直到 5 年前