我在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>
任何想法?
答案 0 :(得分:1)
@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中的那些它将起作用。