html - 如何对齐 Bootstrap Dropright 菜单，使其向上打开(与默认的向下方向不同)？

Question

我的右下拉菜单正确地向右下降，但向下下降，这导致它隐藏在我的页面下方。我希望它向上而不是向下打开。

我试着摆弄 CSS，将 bottom:0 添加到 dropdown-menu，但没有成功。我也试过在 dropup 中嵌套 dropdown-menu-right 但显示的菜单与按钮不一致(它位于右上角的对 Angular 线)。

这是我的下拉菜单的完整代码:

              <div class="dropright" style="position: relative;">
                <button class="btn btn-primary btn-block" style="font-size: large;" onblur="this.nextSibling.style.display='none'" onclick="this.nextSibling.style.display='block'" >
                  <img src="/assets/Images/Avatar.jpg"  class="rounded-circle" style="height:30px;width:30px; padding: 0;" alt="Avatar">
                </button>
                <div class="dropdown-menu" style="position: absolute;">
                  <a class="dropdown-item" href="">Action</a>
                  <a class="dropdown-item" href="">Another action</a>
                  <a class="dropdown-item" href="">Something else here</a>
                  <a class="dropdown-item" href="">Something else here</a>
                </div>
              </div>

This是我想要的

This是问题

Answer 1

你期待吗

.dropup .dropdown-menu {
    top: auto;
    left: 35px;
    bottom: 100%;
    margin-bottom: -36px !important;
 }

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
  <br><br><br>
  <div class="dropup">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href=" ">APPLICATIONS</a></li>
        <li class="divider"></li>

      <li><a href=" ">Bitbucket</a></li>
      <li><a href="#">Jira </a></li>
    </ul>
  </div>
</div>