Bootstrap 4菜单打开后下拉箭头方向如何更改？

Question

Bootstrap 4菜单打开后下拉箭头方向如何更改？

jquerycsstwitter-bootstrapbootstrap-4caret

4

我刚开始学习 Bootstrap 4。我有一个带有下拉菜单的导航菜单。它有标准的向下指向的 Bootstrap 下拉符号，这是自动添加的。

现在，我想在打开 nav 项目的下拉菜单后将其方向更改为“向上”。我已经搜索了整个互联网甚至更多，但没有找到适用于 Bootstrap 4 的工作解决方案，而不使用 font-awesome 或变通方法。

以下是我的菜单 HTML 代码（正常工作），包括下拉菜单项目（Item 2）：

<nav class="navbar navbar-expand-sm navbar-light">
  <a class="navbar-brand" href="#"><img src="img/logo.svg" width="80" height="80" alt="Logo"></a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <div class="collapse navbar-collapse">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Item 1<span class="sr-only">(current)</span></a>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="" data-toggle="dropdown">Item 2</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Item 2.1</a>
          <a class="dropdown-item" href="#">Item 2.2</a>
          <a class="dropdown-item" href="#">Item 2.3</a>
        <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Item 2.4</a>
        </div>
      </li>
      <a class="nav-item nav-link" href="#">Item 3</a>
      <a class="nav-item nav-link" href="#">Item 4</a>
    </div>
  </div>
</nav>

一个CSS或jQuery的解决方案都可以，只要它不是一个变通方法，而是一个漂亮、干净的Bootstrap解决方案。这应该是可能的，对吧？

那么，谁能帮我把下拉项的插入符方向从下改为上呢？最好还有个漂亮的动画效果。提前感谢！

- Sjoerd

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

您可以像这样简单地旋转它：

.dropdown-toggle[aria-expanded="true"]:after {
  transform: rotate(180deg);
}


/*for the animation*/
.dropdown-toggle:after {
  transition: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-light">
  <a class="navbar-brand" href="#"><img src="img/logo.svg" width="80" height="80" alt="Logo"></a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <div class="collapse navbar-collapse">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Item 1<span class="sr-only">(current)</span></a>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="" data-toggle="dropdown">Item 2</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Item 2.1</a>
          <a class="dropdown-item" href="#">Item 2.2</a>
          <a class="dropdown-item" href="#">Item 2.3</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Item 2.4</a>
        </div>
      </li>
      <a class="nav-item nav-link" href="#">Item 3</a>
      <a class="nav-item nav-link" href="#">Item 4</a>
    </div>
  </div>
</nav>