Bootstrap 4下拉菜单出现在其他元素后面

Question

我遇到问题bootstrap 4 dropdown menu，如果有足够的空间并且从下到上打开下拉列表，则所有菜单都显示正常，但如果菜单从上到下打开了一些menu items确实出现在其他div之后。我该如何解决这个问题以及为什么只在某种情况下才会发生？我尝试了位置相对和z-index，但它不起作用。

  

更新：@ZimSystem答案很好，但它没有解决我的问题，所以我更新了我的代码，忠实地再现了我面临的问题。

以下是简化代码：

$(document).ready(function() {
    $('.container').hover(function() {
        if (!$(this).find('.card').hasClass('flipped')) {
            $(this).find('.card').toggleClass('flipped')
        }
        $(this).find('.card').addClass('hovered');
    }, function() {
        var val = $(this).find('.card');
        $(this).find('.card').removeClass('hovered');
        setTimeout(function() {
            if (!val.hasClass('hovered')) {
                val.removeClass('flipped')
            }
        }, 1000);
    });

});

.dropdown{
    width: 100% !important;
    margin-top: 30% !important;
}
.dropdown a{
    width: 100% !important;
}
.dropdown-item{
    color: black !important;
}
.dropdown-menu{
    height: auto !important;
}

.container {
  width: 150px !important;
  height: 150px;
  float: left;
  position: relative;
  margin: 3% 2.25% 0 2.25%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}


.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}


.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div id="main"><br>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink3">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink4">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink6">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink7">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink8">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

</div>

Answer 1

更新回答（基于赏金请求）

问题是transform-style: preserve-3d;上的.card 打破了下拉列表中的z顺序。当popper.js动态定位下拉列表时，它会将translate3d(x,x,0) CSS添加到下拉列表中。

由于z顺序设置为0，因此所有其他具有用于翻转动画的transform-style: preserve-3d;的卡都会隐藏下拉列表。为了使dropdown-menu具有适当的z-order，它还必须位于translate3d ...

.dropdown {
   margin-top: 30%;
   transform-style: preserve-3d;
   transform: translate3d(0,0,10px) !important;
}

.dropdown-menu{
    height: auto !important;
    position: relative !important;
    transform: translate3d(0,0,10px) !important;
}

此外，除非父元素 还有translate3d，否则z-order不会使用transform-style: preserve-3d;。因此，在这种情况下，transform-style: preserve-3d;必须添加到所有父元素（#main，.container，.back，.test，和.dropdown）..

Working Demo on Codeply

<小时/> 原始答案

所有z-index: 99999 !important;上的.dropdown会导致下一行覆盖上一行的下拉列表。删除z-index ...

.dropdown{
    width: 100%;
    margin-top: 30%;
}

下拉列表的定位现在由popper.js控制，这会做一些意想不到的事情。尝试使用 data-flip="false" 来阻止下拉列表覆盖自己的按钮。

https://www.codeply.com/go/R0ePzWnvPC

＆＃13;

＆＃13;

.test{
    width: 150px;
    height: 150px;
    margin: 3% 2.25% 0 2.25%;
    float: left;
    background-color: lightgrey;
    position: relative;
    perspective: 800;
}
.dropdown{
    width: 100% !important;
    margin-top: 30% !important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>
<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>


<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>


<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 9</span></a>
      </div>
   </div>
</div>


<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

有点黑客，我已将所有部分包含在float-left类的div中，并将.container的浮动更改为右。

＆＃13;

＆＃13;

$(document).ready(function() {
    $('.container').hover(function() {
        if (!$(this).find('.card').hasClass('flipped')) {
            $(this).find('.card').toggleClass('flipped')
        }
        $(this).find('.card').addClass('hovered');
    }, function() {
        var val = $(this).find('.card');
        $(this).find('.card').removeClass('hovered');
        setTimeout(function() {
            if (!val.hasClass('hovered')) {
                val.removeClass('flipped')
            }
        }, 1000);
    });

});

＆＃13;

.dropdown{
    width: 100% !important;
    margin-top: 30% !important;
}
.dropdown a{
    width: 100% !important;
}
.dropdown-item{
    color: black !important;
}
.dropdown-menu{
    height: auto !important;
}

.container {
  width: 150px !important;
  height: 150px;
  float: right;
  position: relative;
  margin: 3% 2.25% 0 2.25%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}


.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}


.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div id="main"><br>
<div class="float-left">
<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink3">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink4">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink6">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink7">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink8">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您还可以检查父元素的溢出 css 属性。在我使用 BS4 的情况下，我已将“.card”父元素的溢出属性从“隐藏”更新为“可见”。

.card { overflow: visible; }