I have a problem with bizzare using the card-columns layout when I have dropdown menus in my cards.
The separation of the lower card drop-down menus expires in the next column (despite the fact that the menu is in the right place). This only happens when the drop-down menu falls (does not fall - this happens when the display window is too short to drop the menu).
This can be seen in the code snippet below. Make sure the window is large enough so that the drop-down menu Card 2falls and does not rise. Then note that the “Change Name” and “Delete” buttons can be clicked by positioning the cursor Card 3.
, 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>
<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>
<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>
</div>
<div>
<p>some content below here</p>
</div>
</body>
</html>
Card 2, ?