如何将下拉菜单与图像底部对齐

Question

如何在Bootstrap 4中将下拉菜单与图像的左下方对齐？

<nav class="navbar navbar-expand-md bg-success navbar-dark fixed-top">
  <!-- Brand -->
  <a class="navbar-brand" href="#">KMA-v1</a>
  <ul class="navbar-nav ml-auto">
    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a data-toggle="dropdown">
        <img src="../public/hard/face.jpeg" class="img-fluid rounded-circle float-right" alt="Cinque Terre">
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>
  </ul>
</nav>

Answer 1

在下拉列表中使用dropdown-menu-right ...

<nav class="navbar navbar-expand-md bg-success navbar-dark fixed-top">
    <!-- Brand -->
    <a class="navbar-brand" href="#">KMA-v1</a>
    <ul class="navbar-nav ml-auto">
        <!-- Dropdown -->
        <li class="nav-item dropdown">
            <a data-toggle="dropdown">
                <img src="//placehold.it/30" class="img-fluid rounded-circle float-right" alt="Cinque Terre">
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
            </div>
        </li>
    </ul>
</nav>

https://www.codeply.com/go/fH5CqQFtMA