我有一个正在开发的 Web 应用程序，并且我正在将 Bootstrap 4 用于某些组件。
表单和表格将一些操作显示为按钮组中的按钮。这是一段示例代码：
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" btn-group">
<a href='#' class="btn btn-sm btn-outline-danger"><i class="fa fa-key"></i> Change Password</a>
<a href='#' class="btn btn-outline-dark btn-sm "><i class="fa fa-pencil-alt"></i> Edit</a>
</div>它看起来像这样： 桌面视图
但是，在移动设备中，按钮会稍微超出屏幕，如下图所示： 移动视图
所以我的问题是，是否有一种简单的方法可以将这些按钮转换为如下所示的下拉菜单：
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button type="button" class="btn btn-outline-success btn-sm dropdown-toggle " data-toggle="dropdown" id="5b4f95e9a64b5" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-cog"></i> Options
</button>
<div class="dropdown-menu" aria-labelledby="5b4f95e9a64b5" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; …