如果将类btn-group添加到.dropdown元素中，则下拉菜单将正确定位。
Updated Exmple

<div class="btn-group dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
    </ul>
</div>

之所以这样做是因为类添加了以下CSS。这样，下拉菜单的位置绝对 * 相对 * 于父元素。

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}

或者，您还可以添加以下内容：
Updated Example

.dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

对我来说，（使用bootstrap 5），这实际上是因为我在输入中遗漏了.dropdown类，而不是相反（这是公认的答案）。
希望这对其他人有帮助。