title: Dropdown within card bleeding into next column of card-columns
body: <p>I am having a bizzare issue using the <a href="https://getbootstrap.com/docs/4.0/components/card/#card-columns" rel="nofollow noreferrer">card-columns</a> layout when I have my cards contain dropdown menus. </p>
  
  <p>The dropdown-menu divs of the bottom cards are bleeding into the next column (despite the menu appearing to be in the correct place). This only occurs when the dropdown menu drops down (not drops up--this occurs when the display window is too short to drop the menu down).</p>
  
  <p>This can be seen in the below code snippet. Make sure the window is large enough so that <code>Card 2</code>'s dropdown menu drops down and not up. Then notice the Change name and Delete buttons can only be clicked by placing the cursor near <code>Card 3</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/g6HsWl.jpg" rel="nofollow noreferrer" title="Demonstration of issue. Card 2&#39;s &quot;Make Copy&quot; option is highlighted despite cursor being far out of position"><img src="https://i.stack.imgur.com/g6HsWl.jpg" alt="" title="Demonstration of issue. Card 2&#39;s &quot;Make Copy&quot; option is highlighted despite cursor being far out of position"></a></p>
  
  <p>It's seen here that <code>Card 2</code>'s <code>Make Copy</code> option is highlighted despite the mouse cursor being far out of position, all the way in the next column.</p>
  
  <p>I am using Chrome 60.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;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"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"&gt;&lt;/script&gt;
  
    &lt;div class="card-columns"&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-body"&gt;
          &lt;h4 class="card-title"&gt;Card name&lt;/h4&gt;
          &lt;p class="card-text"&gt;I am some text&lt;/p&gt;
          &lt;div class="dropdown"&gt;
            &lt;button class="btn btn-primary dropdown-toggle" type="button" id="moreActionsDropdown" data-toggle="dropdown"&gt;More actions&lt;/button&gt;
            &lt;div class="dropdown-menu"&gt;
              &lt;button class="dropdown-item"&gt;Change name&lt;/button&gt;
              &lt;button class="dropdown-item"&gt;Make copy&lt;/button&gt;
              &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
              &lt;button class="dropdown-item text-danger"&gt;Delete&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--end card 1--&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-body"&gt;
          &lt;h4 class="card-title"&gt;Card name&lt;/h4&gt;
          &lt;p class="card-text"&gt;I am some text&lt;/p&gt;
          &lt;div class="dropdown"&gt;
            &lt;button class="btn btn-primary dropdown-toggle" type="button" id="moreActionsDropdown" data-toggle="dropdown"&gt;More actions&lt;/button&gt;
            &lt;div class="dropdown-menu"&gt;
              &lt;button class="dropdown-item"&gt;Change name&lt;/button&gt;
              &lt;button class="dropdown-item"&gt;Make copy&lt;/button&gt;
              &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
              &lt;button class="dropdown-item text-danger"&gt;Delete&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--end card 2--&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-body"&gt;
          &lt;h4 class="card-title"&gt;Card name&lt;/h4&gt;
          &lt;p class="card-text"&gt;I am some text&lt;/p&gt;
          &lt;div class="dropdown"&gt;
            &lt;button class="btn btn-primary dropdown-toggle" type="button" id="moreActionsDropdown" data-toggle="dropdown"&gt;More actions&lt;/button&gt;
            &lt;div class="dropdown-menu"&gt;
              &lt;button class="dropdown-item"&gt;Change name&lt;/button&gt;
              &lt;button class="dropdown-item"&gt;Make copy&lt;/button&gt;
              &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
              &lt;button class="dropdown-item text-danger"&gt;Delete&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--end card 3--&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;p&gt;some content below here&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a way to make <code>Card 2</code>'s dropdown behave as one would expect?</p>