如何在活动的Bootstrap 4下拉列表中旋转箭头图标？

在活动的Bootstrap 4下拉列表中旋转箭头图标，可以通过以下步骤实现：

首先，确保你已经引入了Bootstrap 4的CSS和JavaScript文件。
在HTML中创建一个下拉列表，并添加一个带有箭头图标的按钮，例如：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    下拉列表 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

默认情况下，Bootstrap的下拉列表箭头图标是向下的。为了实现旋转效果，我们可以使用CSS和JavaScript来修改箭头图标的样式。
在CSS中，添加以下样式：

.dropdown .caret {
  transition: transform 0.3s ease;
}

.dropdown.show .caret {
  transform: rotate(180deg);
}

这些样式将为箭头图标添加过渡效果，并在下拉列表展开时旋转180度。

在JavaScript中，添加以下代码：

$('.dropdown-toggle').click(function() {
  $(this).find('.caret').toggleClass('rotate');
});

这段代码将在下拉列表按钮被点击时，切换箭头图标的旋转类名。

现在，当你点击下拉列表按钮时，箭头图标将会旋转180度。你可以根据需要自定义样式和动画效果。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）腾讯云云服务器（CVM）是一种可随时扩展的云计算服务，提供高性能、可靠稳定的云服务器，适用于各类应用场景。您可以根据实际需求选择不同配置的云服务器，并根据业务需求灵活调整配置。腾讯云云服务器支持多种操作系统，提供丰富的网络和存储选项，以及强大的安全防护能力。

了解更多腾讯云云服务器（CVM）的信息，请访问：腾讯云云服务器（CVM）产品介绍