如何对齐引导右下拉菜单，使其向上打开(与默认的向下方向不同)

Question

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

我尝试摆弄 CSS，在dropdown-menu中添加bottom:0，但它不起作用。我也尝试在dropup中嵌套dropdown-menu-right，但显示的菜单与按钮不一致(它位于右上角的对角线(。

这是我的完整下拉列表代码：

              <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>

这就是我想要的

这就是问题所在

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>