在这个答案中，我在您的问题中使用了更新的代码，并对 animate.css 代码和 Bootstrap4 drop-down 项目进行了必要的修改，以便最终结果更符合我理解的规定要求：
CSS
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(9rem, 2rem, 0);
transform: translate3d(9rem, 2rem, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 2rem, 0);
transform: translate3d(0, 2rem, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(9rem, 2rem, 0);
transform: translate3d(9rem, 2rem, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 2rem, 0);
transform: translate3d(0, 2rem, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
.dropdown-item {
height: 2rem !important;
margin-bottom: 1rem !important;
padding: 1rem !important;
width: 25rem !important;
}
此解决方案具有完全的适应性，如果您想完成它，我很乐意与您合作：)
重要细节：
Bootstrap 4 类 text-right 和 dropdown-menu-lg-left 是
不相容。菜单按钮在任何情况下都不会向左移动
如果text-right 被添加到col-md-5。
-
我更改了translate3d 的“y”属性，以便slideInRight
出现在按钮下方。如果您愿意，则无需进行此更改
menu-item 在按钮滑入时覆盖它。如果你想
更改它，然后 所有引用 到 translate3d 应该有
'y' 元素放回 0：
translate3d(9rem, 2rem, 0); 将变为 translate3d(9rem, 0, 0);
对所有对translate3d 的引用进行了类似的更改。
我更改的dropdown-item 属性也演示了
在不使用内联样式的情况下该元素的适应性（如
用你以前版本的代码写的）。
我希望这个答案对 Feroz 有所帮助。如前所述，我很乐意与您合作完成满足您要求的解决方案。 :)
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(9rem, 2rem, 0);
transform: translate3d(9rem, 2rem, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 2rem, 0);
transform: translate3d(0, 2rem, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(9rem, 2rem, 0);
transform: translate3d(9rem, 2rem, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 2rem, 0);
transform: translate3d(0, 2rem, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
.dropdown-item {
height: 2rem !important;
margin-bottom: 1rem !important;
padding: 1rem !important;
width: 25rem !important;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- <div class="container"> -->
<div class="row m-0">
<div class="col-md-7"></div>
<div class="col-md-5">
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
Right-aligned
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left animated slideInRight" style="">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div>
</div>
<!-- </div> -->
<!-- javascript -->
<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.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>
</body>
</html>