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>

它看起来像这样： desktop view

但是，在移动设备中，按钮如下图所示略微超出了屏幕： mobile view

所以我的问题是，有没有一种简单的方法可以将这些按钮转换为如下所示的下拉菜单：

<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>

我知道绘制两个选项并在移动设备中隐藏一个选项，然后在桌面视图中隐藏另一个选项的常用方法。但是，如果您遇到很多案件，这似乎有些矫kill过正。

任何想法都会受到赞赏

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>

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

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

1 个答案: