表中的Bootstrap 4下拉菜单 [英] Bootstrap 4 drop-down menu in table

问题描述

我在下拉菜单(引导程序4)上遇到了一些麻烦.所以我有一张桌子:

I have some trouble with a drop-down menu (Bootstrap 4). So I have a table:

当我单击第一行中的设置时，会有一个下拉列表:

When I'm clicking on settings in first row I have a drop-down:

但是，当我单击第二行中的设置时，我在与第一行相同的位置有一个下拉菜单.我该怎么解决?

But when I'm clicking on settings in second row, I have a drop-down in same place as the first. How I can solve it?

这是一个codepen同样的麻烦在那里: CodePen

Here is a codepen same troubles there: 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>

推荐答案

如

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

Vertical clipping/truncation
Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

之所以发生这种情况，是因为 table-responsive的垂直高度不够.例如，给table-responsive最小高度...

It's happening because the table-responsive doesn't have enough vertical height. Give the table-responsive a min height, for example...

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

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

这篇关于表中的Bootstrap 4下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！