Bootstrap 4 表格中的下拉菜单

Question

我在使用下拉菜单 (Bootstrap 4) 时遇到了一些麻烦。所以我有一张桌子：

当我点击第一行的设置时，我有一个下拉菜单：

但是当我点击第二行的设置时，我在第一行的相同位置有一个下拉菜单。我该如何解决？

这是一个代码笔，那里有同样的麻烦： CodePen

HTML:

 <div class="table-responsive">
        <table class="table table-hover table-sm">
            <thead>
                <tr>
                    <th>Фио сотрудника</th>
                    <th>Должность</th>
                    <th>Телефон</th>
                    <th>Ломбард</th>
                    <th>Профиль доступа</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="tflex">
                        <span class="default-av">hC</span>
                        <span>Тарнавский Дмитрий Алексеевич</span>
                    </td>
                    <td>Разработчик</td>
                    <td>[phone]</td>
                    <td>Южный</td>
                    <td>Администратор</td>
                    <td align="center">
                        <div class="dropdown">
                            <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="far fa-cog"></i>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Разработчик</td>
                    <td>Moe</td>
                    <td>[phone]</td>
                    <td>Dooley</td>
                    <td>[phone]</td>
                    <td align="center">
                        <div class="dropdown">
                            <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="far fa-cog"></i>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#">Action2</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </div>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>

原文由 WhoIsDT 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如 Bootstrap 文档 中所述…

垂直裁剪/截断

响应式表格使用 overflow-y: hidden，它会剪掉超出表格底部或顶部边缘的任何内容。特别是，这可以剪掉下拉菜单和其他第三方小部件。

这是因为 table-responsive 没有足够的垂直高度。给 table-responsive 一个最小高度，例如…

 .vh-100 {
    min-height: 100vh;
}

https://codepen.io/anon/pen/VXmLqG?editors=1100

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

data-toggle="dropdown" data-boundary="window"

上面的代码对我有用！

这是我在表格单元格代码中的完整下拉列表：

 <div class="btn-group d-md-none m-1">
  <button class="btn btn-primary dropdown-toggle"
    type="button"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    data-boundary="window"
    aria-haspopup="true"
    aria-expanded="false">
    <span>Actions</span>
  </button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Dropdown item</a>
  </div>
</div>
</td>

原文由 Robert van Lienden 发布，翻译遵循 CC BY-SA 4.0 许可协议