在bootstrap表问题中打开bootstrap select

Question

The Problem

我正在使用bootstrap-table插件和bootstrap-select插件，它们都非常好用。 但是当我在bootstrap-table中使用bootstrap-select时，我遇到了一个问题。如果最后一行的选择框打开，则表格大小会改变，而不是选择框“覆盖”表区域，从而创建一个我不喜欢的滚动区域。

如下图所示：

我试图使用下面的javascript代码“修复”此效果，但无济于事。代码被执行但问题仍然存在。我没有看到哪个css对此行为负责，并且非常感谢任何帮助。

$('.table-responsive').on('show.bs.select', function () { 
  console.log("triggered show bs select");
  $('.table-responsive').css( "overflow", "hidden" ); 
}); 
$('.table-responsive').on('hide.bs.select', function () { 
  console.log("triggered hide bs select");
  $('.table-responsive').css( "overflow", "auto" ); 
})

Example

行为可以在： 的jsfiddle：http://jsfiddle.net/e3nk137y/8612/

---

编辑

我现在有它工作，但只有在桌子上应用padding-bottom并使用以下js代码：

$('.table-responsive').on('show.bs.select', function () { 
      $('.table-responsive').css( "overflow", "inherit" );
      $('.bootstrap-table').css( "overflow", "inherit" ); 
      $('.fixed-table-body').css( "overflow", "inherit" );     
 }); 

我现在暂时打开这个问题，因为在我的意见中这不是一个“好的”修复，特别是需要再次“隐藏”选择框所需的填充。

Answer 1

您可以添加选项container: 'body'。这会将下拉列表放在桌子外面并防止出现问题。如果body出现问题，只需使用包含该表的任何元素，该表足以包含下拉菜单。

Jsfiddle

Answer 2

类.fixed-table-body似乎导致了这一点。删除overflow-x: auto;和overflow-x: auto;可以解决您的问题。

Answer 3

类.table-responsive似乎导致了这一点。删除overflow-x：auto;解决你的问题。你可以在bootstrap.css中找到这种风格