Bootstrap-select 在响应式 table 中，页面总是向上滚动

Question

我在 table-响应式 table 的 td 中有一个 bootstrap-select。如果我点击 select-picker，下拉菜单并不完全可见（可见性受 table 边距限制）。如果我添加 data-container="body" （或数据容器中的另一个元素，作为官方指南），页面会自动转到顶部，每次我必须向下滚动到 table （带有下拉菜单正确打开并可见）。

<div class="table-responsive">  
  <table class="table" id="table">     
    <thead>
      <tr class="d-flex">
      <!-- others -->    
    </thead>    
    <tbody id="participants">
     <!-- others -->
      <td class="col-3">
        <select class="selectpicker" multiple data-live-search="true">
        <!-- options -->
        </select>
      </td>    
     </tbody>   
   </table>
</div>

Answer 1

您没有遵循 bootstrap 和 table 结构。我替换了修改后的代码：

<div class="container">
    <table class="table table-sm">
        <thead>
        <tr>
            <th scope="col">#</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">
                <select class="selectpicker form-control" multiple data-live-search="true">
                    <option>one</option>
                    <option>two</option>
                    <option>three</option>
                </select>
            </th>
        </tr>
        </tbody>
    </table>
</div>

Bootstrap-select 在响应式 table 中，页面总是向上滚动

Bootstrap-select in responsive table, page always scroll up

html

css

bootstrap-select

bootstrap-4

bootstrap-selectpicker