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

引导程序4:跨列的卡片中断中的下拉列表?

reactstrap bootstrap-4 css html

jramm · 技术社区 · 7 年前

我在使用bootstrap4(特别是reactstrap,但我可以在bootstrap中重新创建相同的问题)时遇到了一个问题,我使用“card columns”创建了一个卡片网格,每张卡片在“card footer”中都有一个下拉菜单。问题是,当我有4张或更多的卡片时,下拉列表似乎会以某种方式在列之间断开….渲染的位置与chrome突出显示元素的位置不同,如下图所示:

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>

我想问题是下拉列表在打开时超出了卡的边界,即使它是绝对定位的。

1 回复 | 直到 7 年前

davidpauljunior 7 年前

原因似乎是 card-columns . 这些列是使用CSS列制作的,并改变其中内容的显示,例如,下拉列表似乎会导致它们到处跳转。

我创建了一个更简单的代码版本来尝试和演示这一点。我添加了一个CSS的注释块来覆盖它,以证明这是原因。如果您取消注释它工作(使用flexbox)。

所以,我建议用 card-column ,则使用引导网格。

/** 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>