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>+7 (921) 030-33-32</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>+7 (921) 030-33-32</td>
                    <td>Dooley</td>
                    <td>+7 (921) 030-33-32</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>

Answer 1

如Bootstrap docs ...

中所述

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

它正在发生，因为 table-responsive没有足够的垂直高度。给table-responsive最小高度，例如......

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

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

Answer 2

这是工作小提琴

string[] lines = File.ReadAllLines(@"D:\Professionals\POC\linQ\linQ\DataFile.txt", Encoding.UTF8);

        if (lines.Count() > 0)
        {
            Dictionary<string, int> listIndex = lines.ToDictionary(
                                                                   x => x.Split('=')[0].Trim(), 
                                                                   x => (x.Contains("$") ? Convert.ToInt32(x.Split('=')[1].Replace("$", "")) : 0)
                                                                   );
            listIndex = listIndex.OrderBy(x => x.Value).ToDictionary(x => x.Key, x => x.Value);
            if (listIndex != null && listIndex.Count > 0)
            {
                //---your code 
            }
        }

Working Fiddle

Answer 3

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

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

Answer 4

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>

表中的Bootstrap 4下拉菜单

4 个答案: