我在使用 card-columns 时遇到了一个奇怪的问题当我的卡片包含下拉菜单时的布局。
底部卡片的下拉菜单 div 渗入下一列(尽管菜单看起来在正确的位置)。这仅在下拉菜单下拉时发生(不会下拉 - 当显示窗口太短而无法下拉菜单时发生)。
这可以在下面的代码片段中看到。确保窗口足够大，以便 Card 2 的下拉菜单下拉而不是向上。然后注意只有将光标放在 Card 3 附近才能单击 Change name 和 Delete 按钮。
在这里可以看到，Card 2 的Make Copy 选项被突出显示，尽管鼠标光标离位很远，一直在下一列。
我使用的是 Chrome 60。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div class="card-columns">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card name</h4>
<p class="card-text">I am some text</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="moreActionsDropdown" data-toggle="dropdown">More actions</button>
<div class="dropdown-menu">
<button class="dropdown-item">Change name</button>
<button class="dropdown-item">Make copy</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item text-danger">Delete</button>
</div>
</div>
</div>
</div>
<!--end card 1-->
<div class="card">
<div class="card-body">
<h4 class="card-title">Card name</h4>
<p class="card-text">I am some text</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="moreActionsDropdown" data-toggle="dropdown">More actions</button>
<div class="dropdown-menu">
<button class="dropdown-item">Change name</button>
<button class="dropdown-item">Make copy</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item text-danger">Delete</button>
</div>
</div>
</div>
</div>
<!--end card 2-->
<div class="card">
<div class="card-body">
<h4 class="card-title">Card name</h4>
<p class="card-text">I am some text</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="moreActionsDropdown" data-toggle="dropdown">More actions</button>
<div class="dropdown-menu">
<button class="dropdown-item">Change name</button>
<button class="dropdown-item">Make copy</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item text-danger">Delete</button>
</div>
</div>
</div>
</div>
<!--end card 3-->
</div>
<div>
<p>some content below here</p>
</div>
</body>
</html>有没有办法让 Card 2 的下拉菜单表现得像人们预期的那样？
最佳答案
您可能需要更改按钮上的 ID #moreActionsDropdown ID 应该是唯一的
关于html - 卡片内的下拉菜单渗入下一列卡片列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46090588/