Encountering a strange problem with the card-columns layout in Bootstrap when using dropdown menus within the cards.
The issue arises when the dropdown-menu divs of the lower cards bleed into the next column, despite appearing in the correct position. This problem only occurs when the dropdown menu drops down, not up (which happens when there is insufficient space to drop down).
You can observe this behavior in the code snippet below. Ensure that the window size is large enough for Card 2's dropdown menu to drop down instead of up. Then you'll notice that the "Change name" and "Delete" buttons can only be clicked by placing the cursor near Card 3.
https://i.sstatic.net/g6HsWl.jpg
The screenshot illustrates that Card 2's "Make Copy" option is highlighted even though the mouse cursor is positioned way out of its expected range, all the way in the neighboring column.
I am using Chrome version 60 for testing.
<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">Some text here</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">Some text here</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">Some text here</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 additional content goes here</p>
</div>
</body>
</html>Is there a solution to make Card 2's dropdown behave as intended?