css - 如何将下拉菜单对齐到图像底部

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