Bootstrap 4：将按钮组转换为小屏幕下拉菜单

Question

我正在开发一个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; left: 0px; transform: translate3d(63px, 31px, 0px);">
    <a href='#' class="dropdown-item"><i class="fa fa-key"></i> Change Password</a>
    <a href='#' class="dropdown-item"><i class="fa fa-pencil-alt"></i> Edit</a>
  </div>
</div>

我知道通常的方法是在移动端显示两个选项并隐藏其中一个，然后在桌面视图中隐藏另一个选项。但如果有很多情况的话，这种方式似乎过于繁琐。

如果有任何想法，将不胜感激。

- Lul

Answer 1

请创建下拉菜单的DOM，但将下拉菜单的显示设置为d-md-none，按钮组的显示设置为d-none d-md-flex。这将使下拉菜单在移动设备上显示，而在桌面设备上隐藏，反之亦然。以下是一个示例：

<!-- css -->
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<!-- js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


<!-- dropdown for mobile -->
<div class="dropdown d-md-none">
 <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; left: 0px; transform: translate3d(63px, 31px, 0px);">
  <a href='#' class="dropdown-item"><i class="fa fa-key"></i> Change Password</a>
  <a href='#' class="dropdown-item"><i class="fa fa-pencil-alt"></i> Edit</a>
 </div>
</div>

<!-- button group for desktop -->
<div class="d-none d-md-flex 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>

编辑 - 哇，我没有意识到这个帖子有多久了。

- David