Bootstrap 4: выпадающий список разрывов карт по столбцам?

Question

У меня проблема с использованием bootstrap 4 (в частности, responsestrap, но я могу воссоздать ту же проблему в bootstrap), где я использую «card-columns» для создания сетки карт, каждая карта имеет выпадающее меню в «card -footer. Проблема в том, что когда у меня есть 4 или более карт, выпадающий список как-то разбивается на столбцы .... где он отображается, отличается от того, где хром выделяет элемент, как показано на этом рисунке:

Если я увеличу количество карт, то на некоторых картах при открытии выпадающего списка карта изменит свое положение - они «прыгают».

Минимальный пример:

body {
  margin: 10px;
}

.dropdown-menu {
  margin-top: 10px;
  margin-bottom: 10px;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container-fluid h-100">
  <div class="mx-4 my-2 row">
    <div class="mx-4 row">
      <div class="card-columns">
        <div class="card border-secondary">
          <div class="card-footer">
            <div class="row">
              <div class="col-md-8">
                <div class="btn-group show">
                  <button class="dropdown-toggle btn btn-outline-secondary">
                   More
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card border-secondary">
          <div class="card-footer">
            <div class="row">
              <div class="col-md-8">
                <div class="btn-group show">
                  <button class="dropdown-toggle btn btn-outline-secondary">
                   More
                </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card border-secondary">
          <div class="card-footer">
            <div class="row">
              <div class="col-md-8">
                <div class="btn-group show">
                  <button class="dropdown-toggle btn btn-outline-secondary">
                   More
                </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card border-secondary">
          <div class="card-footer">
            <div class="row">
              <div class="col-md-8">
                <div class="btn-group show">
                  <button class="dropdown-toggle btn btn-outline-secondary">
                   More
                </button>
                  <div role="menu" class="dropdown-menu show" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 27px, 0px);" data-placement="bottom-start">
                    <button class="dropdown-item">
                      Button 1
                    </button>
                    <button class="dropdown-item">
                      Button 2
                    </button>
                    <button class="dropdown-item">
                      Button 3
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card border-secondary">
          <div class="card-footer">
            <div class="row">
              <div class="col-md-8">
                <div class="btn-group show">
                  <button class="dropdown-toggle btn btn-outline-secondary">
                   More
                </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

В этом примере только последние 2 кнопки меню кажутся «ломающимися» и появляются в другом месте - ваш экран должен быть достаточно широким, чтобы отображалось более 1 столбца для возникновения проблемы.

Я полагаю, что проблема заключается в том, что раскрывающийся список выходит за границы карт при открытии, даже если он абсолютно позиционирован.

Как сделать такой выпадающий список без вмешательства в макет столбцов карты?

Answer 1

Причина этого, кажется, card-columns. Эти столбцы создаются с использованием CSS-столбцов и изменяют отображение содержимого в них, например, выпадающий список, кажется, заставляет их прыгать повсюду.

Я создал более простую версию вашего кода, чтобы попытаться продемонстрировать это. В версии 1 при нажатии на выпадающее меню переключаются столбцы. Я добавил прокомментированный блок CSS, который отменяет это, чтобы доказать, что это причина. Если вы раскомментируете, что это работает (используя flexbox).

Итак, я бы предложил вместо card-column использовать сетку Bootstrap. Это не даст вам эффекта каменной кладки, но это лучше, чем странность, которую вы получили.

/** Click that version 1 dropdowns.
    The layout jumps around.
    I think that's because of the logic behind the scenes of       CSS columns.
    Uncomment the below to prove that columns is the cause. 
    Don't actually do it in your code.
    Instead, consider using the bootstrap grid instead of card columns.
**/

/* .card-columns {
  column-count: auto !important;
  display: flex;
  flex-wrap: wrap;
}

.card-columns > * {
  flex: 0 1 33.3%;
} */

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<h2>Version 1 - CSS Columns</h2>
<div class="card-columns">
  <div class="card">
    <div class="row">
      <div class="col-md-8">
        <div class="btn-group">
          <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Small button
          </button>
          <div class="dropdown-menu">
            <a href="#" class="dropdown-item">item</a>
            <a href="#" class="dropdown-item">item</a>
            <a href="#" class="dropdown-item">item</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="row">
      <div class="col-md-8">
        <div class="btn-group">
          <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Small button
          </button>
          <div class="dropdown-menu">
            <a href="#" class="dropdown-item">item</a>
            <a href="#" class="dropdown-item">item</a>
            <a href="#" class="dropdown-item">item</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="btn-group">
      <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Small button
      </button>
      <div class="dropdown-menu">
        <a href="#" class="dropdown-item">item</a>
        <a href="#" class="dropdown-item">item</a>
        <a href="#" class="dropdown-item">item</a>
      </div>
    </div>
  </div>
</div>

<h2>Version 2 - Grid</h2>
<div class="row">
  <div class="col-md-4">
    <div class="card">
      <div class="row">
        <div class="col-md-8">
          <div class="btn-group">
            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Small button
            </button>
            <div class="dropdown-menu">
              <a href="#" class="dropdown-item">item</a>
              <a href="#" class="dropdown-item">item</a>
              <a href="#" class="dropdown-item">item</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-md-4">
    <div class="card">
      <div class="row">
        <div class="col-md-8">
          <div class="btn-group">
            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Small button
            </button>
            <div class="dropdown-menu">
              <a href="#" class="dropdown-item">item</a>
              <a href="#" class="dropdown-item">item</a>
              <a href="#" class="dropdown-item">item</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-md-4">
    <div class="card">
      <div class="row">
        <div class="col-md-8">
          <div class="btn-group">
            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Small button
            </button>
            <div class="dropdown-menu">
              <a href="#" class="dropdown-item">item</a>
              <a href="#" class="dropdown-item">item</a>
              <a href="#" class="dropdown-item">item</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>