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>

我知道绘制两个选项并在移动设备中隐藏一个选项，然后在桌面视图中隐藏另一个选项的常用方法。但如果你有很多案例，这似乎有点过分。

任何想法将不胜感激

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>

编辑 - 哇，我没有意识到这个线程有多老。