Bootstrap 4 表格中的下拉菜单

Question

我在使用下拉菜单时遇到一些问题（Bootstrap 4）。所以我有一张桌子：

\n\n

\n\n

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

\n\n

\n\n

但是，当我单击第二行中的设置时，我在与第一行相同的位置有一个下拉菜单。我怎样才能解决它？

\n\n

\n\n

这是一个 CodePen，那里也有同样的麻烦：\n CodePen

\n\n

HTML：

\n\n

<div class="table-responsive">\n        <table class="table table-hover table-sm">\n            <thead>\n                <tr>\n                    <th>\xd0\xa4\xd0\xb8\xd0\xbe \xd1\x81\xd0\xbe\xd1\x82\xd1\x80\xd1\x83\xd0\xb4\xd0\xbd\xd0\xb8\xd0\xba\xd0\xb0</th>\n                    <th>\xd0\x94\xd0\xbe\xd0\xbb\xd0\xb6\xd0\xbd\xd0\xbe\xd1\x81\xd1\x82\xd1\x8c</th>\n                    <th>\xd0\xa2\xd0\xb5\xd0\xbb\xd0\xb5\xd1\x84\xd0\xbe\xd0\xbd</th>\n                    <th>\xd0\x9b\xd0\xbe\xd0\xbc\xd0\xb1\xd0\xb0\xd1\x80\xd0\xb4</th>\n                    <th>\xd0\x9f\xd1\x80\xd0\xbe\xd1\x84\xd0\xb8\xd0\xbb\xd1\x8c \xd0\xb4\xd0\xbe\xd1\x81\xd1\x82\xd1\x83\xd0\xbf\xd0\xb0</th>\n                    <th></th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr>\n                    <td class="tflex">\n                        <span class="default-av">hC</span>\n                        <span>\xd0\xa2\xd0\xb0\xd1\x80\xd0\xbd\xd0\xb0\xd0\xb2\xd1\x81\xd0\xba\xd0\xb8\xd0\xb9 \xd0\x94\xd0\xbc\xd0\xb8\xd1\x82\xd1\x80\xd0\xb8\xd0\xb9 \xd0\x90\xd0\xbb\xd0\xb5\xd0\xba\xd1\x81\xd0\xb5\xd0\xb5\xd0\xb2\xd0\xb8\xd1\x87</span>\n                    </td>\n                    <td>\xd0\xa0\xd0\xb0\xd0\xb7\xd1\x80\xd0\xb0\xd0\xb1\xd0\xbe\xd1\x82\xd1\x87\xd0\xb8\xd0\xba</td>\n                    <td>+7 (921) 030-33-32</td>\n                    <td>\xd0\xae\xd0\xb6\xd0\xbd\xd1\x8b\xd0\xb9</td>\n                    <td>\xd0\x90\xd0\xb4\xd0\xbc\xd0\xb8\xd0\xbd\xd0\xb8\xd1\x81\xd1\x82\xd1\x80\xd0\xb0\xd1\x82\xd0\xbe\xd1\x80</td>\n                    <td align="center">\n                        <div class="dropdown">\n                            <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n                                <i class="far fa-cog"></i>\n                            </a>    \n                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">\n                                <a class="dropdown-item" href="#">Action</a>\n                                <a class="dropdown-item" href="#">Another action</a>\n                                <a class="dropdown-item" href="#">Something else here</a>\n                            </div>\n                        </div>\n                    </td>\n                </tr>\n                <tr>\n                    <td>\xd0\xa0\xd0\xb0\xd0\xb7\xd1\x80\xd0\xb0\xd0\xb1\xd0\xbe\xd1\x82\xd1\x87\xd0\xb8\xd0\xba</td>\n                    <td>Moe</td>\n                    <td>+7 (921) 030-33-32</td>\n                    <td>Dooley</td>\n                    <td>+7 (921) 030-33-32</td>\n                    <td align="center">\n                        <div class="dropdown">\n                            <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n                                <i class="far fa-cog"></i>\n                            </a>    \n                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">\n                                <a class="dropdown-item" href="#">Action2</a>\n                                <a class="dropdown-item" href="#">Another action</a>\n                                <a class="dropdown-item" href="#">Something else here</a>\n                            </div>\n                        </div>\n                    </td>\n                </tr>\n\n            </tbody>\n        </table>\n    </div>\n

\n

Answer 1

正如Bootstrap 文档中所述...

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

发生这种情况是因为table-responsive没有足够的垂直高度。给出table-responsive最小高度，例如......

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

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

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>