javascript - 将 Bootstrap 下拉列表附加到不同的元素

Question

我想选择我的 bootstrap 下拉列表在打开时与哪个元素对齐。这可能吗？我愿意使用 AngularJS 或 JavaScript 以编程方式执行此操作。

目前我有一个文本框，上面附加了一个按钮下拉列表。类似这样:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu" role="menu">
      <li><a href="#">Some Action</a></li>
    </ul>
  </div>
</div>

我希望下拉菜单对齐，以便它从文本框而不是按钮下拉。我不能只将它移动 n 个像素，因为输入框的宽度是相对于屏幕尺寸的。

Answer 1

在您的情况下，您可以通过对 .input-group-btn 再应用一个类来修复它分区:

<div class="input-group-btn input-group-btn-static">
    <button type="button" class="btn btn-default" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu" role="menu" id="drop">
        <li><a href="#">Some Action</a></li>
    </ul>
</div>

CSS:

.input-group-btn-static {
    position: static;
}

想法是使下拉位置相对于<div class="input-group"></div>而不是 div.input-group-btn .

演示:http://plnkr.co/edit/Dfq41N5T4WwUMAJL1NYb?p=preview