我有一个bootstrap3响应式表，每行包含一个下拉选择(使用无序列表元素(。单击下拉列表时，用户被迫滚动以查看所有选项，而在较小的屏幕上，我什至无法滚动以执行此操作。
我正在尝试使选项可以出现在表格顶部而不是下方/后面(这会强制垂直滚动(。我尝试更改li的z-index和overflow-y属性，ul并在CSS中包含div元素，但这并没有产生任何影响。
类似的SO问题也没有收到接受/有效的答案：
"下拉按钮在引导程序 3 中被响应式表切断">
"响应式表中的引导下拉菜单">
"引导程序中的响应表问题">
如何使列表显示为浮动在响应式表格的顶部/外部？这可能吗？
JSFIDDLE：
https://jsfiddle.net/vndyLy1e/3/
.html：
<div class="table-responsive">
<table class="table table-striped table-condensed" style="z-index: 1">
<thead>
<tr>
<th class="col-xs-2 col-md-3">Col 1</th>
<th class="col-xs-1 col-md-2">Col 2</th>
<th class="col-xs-1 col-md-2">Col 3</th>
<th class="col-xs-1 col-md-2">Col 4</th>
<th class="col-xs-1 col-md-1">Col 5</th>
<th class="col-xs-1 col-md-1">Col 6</th>
<th class="col-xs-1 col-md-1"></th>
</tr>
</thead>
<tbody class="table-body">
<tr>
<td>$Col 1 Data</td>
<td>$Col 2 Data</td>
<td>$Col 3 Data</td>
<td>$Col 4 Data</td>
<td>$Col 4 Data</td>
<td>$Col 5 Data</td>
<!-- Action Dropdown-->
<td>
<div class="btn-group">
<button type="button" class="btn btn-default btn-transparent btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="title-element-name">Actions </span><span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a>Drop Option 1</a></li>
<li><a>Drop Option 2</a></li>
<li><a>Drop Option 3</a></li>
<li><a>Drop Option 4</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
.css：
.dropdown-menu {
overflow-y: visible !important;
z-index: 999;
ul {
overflow-y: visible !important;
}
li {
overflow-y: visible !important;
}
li:hover {
cursor: pointer;
cursor: hand;
}
}
.title-element-name {
color: #FF8200;
font-weight: bold;
}
.table-responsive {
z-index: 999;
overflow-y: auto !important;
}
我也有这个问题。我发现的几乎每个修复程序都会破坏其他东西。最后，我最终将其设为下拉按钮。它工作得很好，直到下拉列表变得太大，然后它再次隐藏，所以我只是放了一个 javascript 函数来更改每次按下按钮时的上边距(以便您可以再次看到所有内容(。
我的表格中的每一行都有一个操作按钮，所以我不得不添加另一个语句，该语句仅在按下顶部按钮时更改边距。我不确定您是否打算使用多个操作按钮，但这是我对您初始问题的修复方法：
https://jsfiddle.net/vndyLy1e/7/
$(document).on('show.bs.dropdown', function(e) {
if ($(e.relatedTarget).hasClass('queryDropdown')) {
$('#test').css('padding-top', '90px');
}
});
$(document).on('hide.bs.dropdown',function (e) {
if ($(e.relatedTarget).hasClass('queryDropdown')) {
$('#test').css('padding-top', '25px');
}
});
如果您有多个操作下拉列表，只需确保只有顶部操作下拉列表具有 id "queryDropdown" 类。之后，它下面的所有行的下拉列表将下降到表中的其他元素上，因此看起来很正常。
您可能可以添加 css 动画以使边距更改更平滑。
在 GitHub 关于此问题的问题讨论中找到了解决方案。
信用@baltazarqc、@llins和@simon21587。
这仍然不是我真正希望的，但它至少使下拉列表起作用。
将pull-right类添加到我的ul.drop-down元素中。然后使用了他们的jQuery解决方案。
$(function() {
$('.table-responsive').on('shown.bs.dropdown', function(e) {
var t = $(this),
m = $(e.target).find('.dropdown-menu'),
tb = t.offset().top + t.height(),
mb = m.offset().top + m.outerHeight(true),
d = 20; // Space for shadow + scrollbar.
if (t[0].scrollWidth > t.innerWidth()) {
if (mb + d > tb) {
t.css('padding-bottom', ((mb + d) - tb));
}
} else {
t.css('overflow', 'visible');
}
}).on('hidden.bs.dropdown', function() {
$(this).css({
'padding-bottom': '',
'overflow': ''
});
});
});
在这里工作小提琴。
类table-responsive位于与类table分开的div中。
<div class="table-responsive">
将它们放在一起可以解决问题。
<table class="table table-responsive table-striped table-condensed" >
.dropdown-menu {
overflow-y: visible !important;
z-index: 999;
left:-80px !important;
}
ul {
overflow-y: visible !important;
}
li {
overflow-y: visible !important;
}
li:hover {
cursor: pointer;
cursor: hand;
}
.title-element-name {
color: #FF8200;
font-weight: bold;
}
.table-responsive {
z-index: 999;
overflow-y: auto !important;
}
.title-element-name {
color: #FF8200;
font-weight: bold;
}
.table-responsive {
z-index: 999;
overflow-y: auto !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div >
<table class="table table-responsive table-striped table-condensed" >
<thead>
<tr>
<th class="col-xs-2 col-md-3">Col 1</th>
<th class="col-xs-1 col-md-2">Col 2</th>
<th class="col-xs-1 col-md-2">Col 3</th>
<th class="col-xs-1 col-md-2">Col 4</th>
<th class="col-xs-1 col-md-1">Col 5</th>
<th class="col-xs-1 col-md-1">Col 6</th>
<th class="col-xs-1 col-md-1"> </th>
</thead>
<tbody class="table-body">
<tr>
<td>$Col 1 Data</td>
<td>$Col 2 Data</td>
<td>$Col 3 Data</td>
<td>$Col 4 Data</td>
<td>$Col 4 Data</td>
<td>$Col 5 Data</td>
<td> <div class="btn-group">
<button type="button" class="btn btn-default btn-transparent btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="title-element-name">Actions </span><span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a>Drop Option 1</a></li>
<li><a>Drop Option 2</a></li>
<li><a>Drop Option 3</a></li>
<li><a>Drop Option 4</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>最简单的方法是将min-height设置为<div>其高度与下拉菜单一样table-responsive。