表中的 Bootstrap 4 下拉菜单

Posted 2023-03-05

【中文标题】表中的 Bootstrap 4 下拉菜单

【英文标题】：Bootstrap 4 drop-down menu in table

【发布时间】：2018-08-27 01:20:58

【问题描述】：

我在使用下拉菜单（引导程序 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>

【问题讨论】：

对两个下拉菜单使用唯一的 Ids

我试过了，没有成功

我尝试了 Codepen Snippet 及其对我的工作

我们正在谈论这个： 对吗？

【参考方案1】：

如Bootstrap docs中所述...

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

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

.vh-100 
    min-height: 100vh;

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

【讨论】：

您的 codepen 有一些问题.. 我看不到它，它总是重新加载页面.. 所以我们检测到响应表中的主要问题。好的。我只是试图删除类表响应。现在我遇到了麻烦，我的 ddmenu 显示远离屏幕右侧。另外，当我重新加载页面时，我需要在元素上单击两次才能打开 ddmenu .. 我该如何解决？第二个问题是我需要打开/关闭 ddmenu 大约 20 次，之后我的 ddmenu 将显示在正常位置......它会是什么？

我的 codepen 上的同样问题：codepen.io/WhoIsDT/pen/RMoNEL。你可以看到。我删除了响应式 talbe 类，现在我需要打开/关闭几次，并且一次 ddmenu 从右向左移动几个 px。如何解决这个错误？

【参考方案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>

【参考方案3】：

为 Bootstrap 4 定义此属性。祝你好运！

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

【讨论】：

请具体说明在哪里添加。它是在锚标签上还是在实际的下拉 DIV 上？

【参考方案4】：

这是工作小提琴

<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="dropdownMenuLink1" 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>
                    <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="dropdownMenuLink2" 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>
                    <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="dropdownMenuLink4" 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>
            <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="dropdownMenuLink7" 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>

Working Fiddle

【讨论】：

也许我遗漏了什么？即使在我更改 id 时在 codepen 上也没有任何反应......

检查小提琴中表格的最后一个元素

您可以识别更正。我想你的问题在这个小提琴中得到了回答