时间戳

首页 > 解决方案 > Bootstrap 下拉按钮更改位置

javascript - Bootstrap 下拉按钮更改位置

问题描述

我正在关注此处找到的文档：https ://getbootstrap.com/docs/4.1/components/dropdowns/ 并添加了以下下拉按钮：

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Example 1</button>
</div>

我遇到的问题是，当单击按钮以显示下拉菜单时，按钮会更改其位置。这发生在我拥有的两个下拉按钮上。

没有点击下拉菜单的按钮

没有点击下拉菜单的按钮

下拉点击和按钮更改位置示例 1

下拉点击和按钮更改位置示例 1

下拉单击和按钮更改位置示例 2

下拉单击和按钮更改位置示例 2

您可以看到发生此问题的示例代码：https ://codepen.io/danfuentes/pen/MWaYOgz

如何获取它以使按钮保持在原位，并且菜单项显示在其下方？

标签： javascripthtmlcssbootstrap-4

解决方案

使用btn-grp类将您的元素包围在父 div 元素中，如下所示：

<div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>

推荐阅读