Bootstrap 4：卡片中的下拉列表是否会跨栏？

Question

我在使用 bootstrap 4（特别是 reactstrap，但我可以在 bootstrap 中重新创建相同的问题）时遇到问题，我正在使用 'card-columns' 创建卡片网格， 'card-footer' 中的每张卡片都有一个下拉菜单。问题是，一旦我有 4 张或更多卡片，下拉列表似乎会以某种方式跨列分开......呈现的位置与 chrome 突出显示元素的位置不同，如此图所示：

如果我增加卡片数量，那么当我打开下拉菜单时，某些卡片会改变位置 - 它们 'jump around'。

最小示例：

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 个按钮似乎 'break' 并出现在其他地方 - 您的屏幕需要足够宽以显示超过 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>

Bootstrap 4：卡片中的下拉列表是否会跨栏？

Bootstrap 4: Dropdown in card breaks across columns?

html

css

bootstrap-4

reactstrap