Проблема с Bootstrap 4 колонки с картами, содержащими аккордеоны

Question

У меня есть несколько карт, которые на самом деле являются аккордеонами и распределены по трем столбцам, и когда я их расширяю, они перемещаются по всему пространству столбца и перемещают карты ниже в другие столбцы. Как я могу убедиться, что они не двигаются? Я хочу, чтобы карта № 4 находилась под #car 1, когда карта № 1 развернута.

<div class="container-fluid">
     <div class="card-columns">
         <div repeat.for="cards in card" class="col-12 col-lg-5 ">
             <div class="card">
                 <card> the cards that are accordions </card>
              </div>
          </div>
      </div>
  </div>

[card disposition][1]

Answer 1

card-columns предназначены для исправления;С вашим аккордеоном область контента расширяется, и поэтому вы видите изменения и скачки, которые происходят ... Я также включил нижеприведенную проблему div *

Чтобы получить эффект, который вы ищете, мыможно использовать обычные классы row и col-[xx]-[99], так что вы не получите никаких настроек, которые вы видите с card-columns

обновленным фрагментом в свете комментария спрашивающего ниже:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<h3>
  Updated solution:
</h3>

<div id="accordion" class="container">
  <div class="row">

    <div class='col-12 col-md-4 col-sm-4 '>
      <div class="card">
        <div class="card-body text-center">
          <div class="card-header">
            <a class="card-link" data-toggle="collapse" href="#collapseOne">
                                Collapsible Group Item #1
                            </a>
          </div>
          <div id="collapseOne" class="collapse show" data-parent="#accordion">
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-body text-center">
          <div class="card-header">
            <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
                                Collapsible Group Item #2
                            </a>
          </div>
          <div id="collapseTwo" class="collapse" data-parent="#accordion">
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class='col-12 col-md-4 col-sm-4'>
      <div class="card">
        <div class="card-body text-center">
          <div class="card-header">
            <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
                                Collapsible Group Item #3
                            </a>
          </div>
          <div id="collapseThree" class="collapse" data-parent="#accordion">
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class='col-12 col-md-4 col-sm-4'>
      <div class="card">
        <div class="card-body text-center">
          <div class="card-header">
            <a class="collapsed card-link" data-toggle="collapse" href="#collapseFour">
                                Collapsible Group Item #4
                            </a>
          </div>
          <div id="collapseFour" class="collapse" data-parent="#accordion">
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

рабочий фрагмент ниже:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<h3>
  solution:
</h3>

<div id="accordion" class="container">
  <div class="row">

    <div class='col-12 col-md-4 col-sm-4 '>
      <div class="card">
        <div class="card-body text-center">
          <div class="card-header">
            <a class="card-link" data-toggle="collapse" href="#collapseOne">
                                Collapsible Group Item #1
                            </a>
          </div>
          <div id="collapseOne" class="collapse show" data-parent="#accordion">
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class='col-12 col-md-4 col-sm-4'>
      <div class="card">
        <div class="card-body text-center">
          <div class="card-header">
            <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
                                Collapsible Group Item #2
                            </a>
          </div>
          <div id="collapseTwo" class="collapse" data-parent="#accordion">
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class='col-12 col-md-4 col-sm-4'>
      <div class="card">
        <div class="card-body text-center">
          <div class="card-header">
            <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
                                Collapsible Group Item #3
                            </a>
          </div>
          <div id="collapseThree" class="collapse" data-parent="#accordion">
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class='col-12 col-md-4 col-sm-4'>
      <div class="card">
        <div class="card-body text-center">
          <div class="card-header">
            <a class="collapsed card-link" data-toggle="collapse" href="#collapseFour">
                                Collapsible Group Item #4
                            </a>
          </div>
          <div id="collapseFour" class="collapse" data-parent="#accordion">
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<hr/>

<h3>
  Problem:
</h3>

<div id="accordionP" class="container">
  <div class='card-columns'>
    <div class="card">
      <div class="card-body text-center">

        <div class="card-header">
          <a class="card-link" data-toggle="collapse" href="#collapseOneP">
                            Collapsible Group Item #1
                        </a>
        </div>
        <div id="collapseOneP" class="collapse show" data-parent="#accordionP">
          <div class="">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-body text-center">
        <div class="card-header">
          <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwoP">
                            Collapsible Group Item #2
                        </a>
        </div>
        <div id="collapseTwoP" class="collapse" data-parent="#accordionP">
          <div class="">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-body text-center">
        <div class="card-header">
          <a class="collapsed card-link" data-toggle="collapse" href="#collapseThreeP">
                            Collapsible Group Item #3
                        </a>
        </div>
        <div id="collapseThreeP" class="collapse" data-parent="#accordionP">
          <div class="">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-body text-center">
        <div class="card-header">
          <a class="collapsed card-link" data-toggle="collapse" href="#collapseFourP">
                            Collapsible Group Item #4
                        </a>
        </div>
        <div id="collapseFourP" class="collapse" data-parent="#accordionP">
          <div class="">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>