Question

我有一个bootstrap3响应表，其中包含每行中的下拉选项（由无序列表元素构成）。单击下拉列表时，用户将被迫滚动以查看所有选项，而在较小的屏幕上，我甚至无法滚动来执行此操作。

我正在试图让它成为选项可以出现在桌面上而不是在/后面（强制垂直滚动）。我尝试在CSS中更改z-index，overflow-y和li元素的ul和div属性，但这并没有什么区别。

类似的SO问题也没有得到接受/工作的答案：

"dropdown button get cutoff by responsive table in bootstrap 3"

"Bootstrap dropdown menu within a responsive table"

"Responsive table issues in bootstrap"

如何让列表显示在响应表的顶部/外部？这甚至可能吗？

的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;
}

Answer 1

我也有这个问题。几乎我发现的每一个修复都会破坏别的东西。最后，我最终把它变成了一个下拉按钮。它工作得很好，直到下拉列表变得太大，然后它再次隐藏所以我只需要一个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＆＃34; queryDropdown＆＃34;类。之后，它下面的所有行都会将其下拉列表放在表格中的其他元素上，这样看起来会很正常。

您可以添加css动画以使边距更改更加平滑。

Answer 2

在GitHub中找到解决方案，讨论此问题here。

归功于@baltazarqc，@ linins和@ 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': ''
    });
  });
});

工作小提琴here。

Answer 3

班级table-responsive位于div，与班级table分开。

 <div class="table-responsive">

将它们放在一起可以解决问题。

<table class="table table-responsive table-striped table-condensed" >

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

最简单的方法是将min-height设置为<div>作为下拉菜单的高度的table-responsive。

在引导响应表

4 个答案: