问题
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?
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>+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>
回答1:
As stated in the Bootstrap docs...
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.
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
回答2:
Define this properties for Bootstrap 4. Good Luck!
data-toggle="dropdown" data-boundary="window"
回答3:
Here is the Working fiddle
<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="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>+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>
<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="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>+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="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>+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="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
来源：https://stackoverflow.com/questions/49346755/bootstrap-4-drop-down-menu-in-table