4
カードにドロップダウンメニューが含まれている場合、card-columnsレイアウトを使用してビザ問題が発生します。カード内のドロップダウンがカード列の次の列に出る
メニューが正しい場所に表示されているにもかかわらず、下のカードのドロップダウンメニューのdivが次の列に染み込んでいます。これは、ドロップダウンメニューがドロップダウンしたときにのみ発生します（ドロップされません。これは、表示ウィンドウが短すぎてメニューをドロップできない場合に発生します）。
これは、次のコードスニペットで確認できます。ウィンドウが十分に大きく、Card 2のドロップダウンメニューがドロップダウンしていないことを確認してください。次に、カーソルをCard 3の近くに置くことによってのみ、名前の変更と削除ボタンをクリックすることができます。
Card 2のMake Copyオプションは、マウスカーソルが、遠い位置から外れている次の列内のすべての方法にもかかわらず、強調表示されていることをここで見られます。私はクローム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>を使用しています
は1つが期待するように動作Card 2のドロップダウンを作るためにそこに方法は何ですか？あなたはおそらく#moreActionsDropdown IDは非常に奇妙なユニーク
彼らは（私は混乱を避けるために、私のスニペットでは、彼らがユニーク保持しているはずですが）私のアプリケーションで一意であるに多くの努力を入れていない場合、私は唯一の財団のようなものを使用することをお勧めすることができます。問題は、ダイアログボックスが表示されないということではなく、ドロップダウンボタンの実際の位置と「表示された」位置が2枚目のカードと同じではないということだけです。カード2のメニューを開いた後、カード3の後にカーソルを置くことでクリックできます。 –