我在 Bootstrap 3 的响应式表格中遇到下拉菜单问题。无论我在 CSS 中放置什么(如溢出:自动或定位),下拉菜单中的菜单都会出现在响应式 div 中,以便单击在您必须滚动的任何链接上。
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr class="table_desc">
<th></th>
<th><input type="checkbox"></th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="table_items">
<td><div class="item_strip"></div></td>
<th><input type="checkbox"></th>
<td>Deposit Paid</td>
<td>
<!-- Split button -->
<div class="btn-group action-button">
<button type="button" class="btn btn-xs btn-danger">View</button>
<button type="button" class="btn btn-danger btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Edit</a></li>
<!-- <li class="divider"></li> -->
<li><a href="#">Send Invoice</a></li>
<li><a href="#">Send Reminder</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
有什么想法吗?
最佳答案
在第 2247 行的 bootstrap.css 中调试之后
@media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
如果您对这两个溢出都发表评论,它会正常工作。由于溢出属性,它在宽度 767 以下无法正常工作,如果您只是覆盖 CSS 中的溢出属性,它就会正常工作。
关于html - 响应式表格中的 Bootstrap 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27081082/