Bootstrap 4 Select Picker问题：侧边栏实时搜索框溢出屏幕

我之前迁移到Bootstrap 4时也碰到过一模一样的问题，根源在于bootstrap-select的下拉菜单定位逻辑在带有特殊定位（比如侧边栏的position: absolute）和overflow: auto的容器里会计算错误的偏移量，导致搜索框向左溢出屏幕。下面是几个可行的修复方案，按推荐程度排序：

方案1：将下拉菜单绑定到body容器（最推荐） #

给你的select标签添加data-container="body"属性，这样bootstrap-select会把下拉菜单（包括搜索框）相对于整个页面的body元素定位，而不是受侧边栏的布局限制。

修改后的select代码：

<select class="selectpicker" data-live-search="true" data-container="body">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

这个方法不会破坏你原有侧边栏的布局，下拉菜单会自动适配视口位置，完全避免溢出问题。

方案2：自定义CSS强制调整下拉菜单位置 #

如果你不想把下拉菜单绑定到body，可以通过CSS强制修改下拉菜单的定位方向，让它从侧边栏右侧弹出，这样搜索框就不会溢出左侧。在你的样式表中添加：

/* 针对bootstrap-select下拉菜单的定位修正 */
.sidebar-offcanvas .bootstrap-select .dropdown-menu {
  left: auto !important;
  right: 0 !important;
  transform: translate(-100%, 0) !important;
  max-width: 300px; /* 可以根据需求调整宽度 */
}

这个方法的好处是下拉菜单依然在侧边栏的上下文里，但需要注意适配不同屏幕尺寸的侧边栏宽度。

方案3：调整侧边栏布局属性（不推荐，可能影响原有功能） #

如果上面两种方法都不适用，可以尝试修改侧边栏的CSS属性：

• 去掉侧边栏的overflow: auto（但会导致侧边栏内容超出时无法滚动）
• 调整侧边栏的position属性从absolute改为relative（可能影响整体页面布局）

完整测试用例（已修复） #

下面是你提供的完整HTML代码，已经添加了方案1的修复，直接运行即可看到效果：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <!-- Optional JavaScript --> 
    <!-- jQuery first, then Popper.js, then Bootstrap JS --> 
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> 
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> 
    <style> 
        .sidebar { top: 50px; left: 0px; position: sticky; } 
    </style> 
    <style> 
        body, html { height:100%; overflow: hidden; } 
        /* * Off Canvas sidebar at medium breakpoint * -------------------------------------------------- */ 
        @media screen and (max-width: 992px) { 
            .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } 
            .row-offcanvas-left .sidebar-offcanvas { left: -33%; } 
            .row-offcanvas-left.active { left: 33%; margin-left: -6px; } 
            .sidebar-offcanvas { position: absolute; top: 0; width: 33%; height: 100%; overflow: auto; } 
        } 
        /* * Off Canvas wider at sm breakpoint * -------------------------------------------------- */ 
        @media screen and (max-width: 34em) { 
            .row-offcanvas-left .sidebar-offcanvas { left: -45%; } 
            .row-offcanvas-left.active { left: 45%; margin-left: -6px; } 
            .sidebar-offcanvas { width: 45%; } 
        } 
        .card { overflow:hidden; } 
        .card-body .rotate { z-index: 8; float: right; height: 100%; } 
        .card-body .rotate i { color: rgba(20, 20, 20, 0.15); position: absolute; left: 0; left: auto; right: -10px; bottom: 0; display: block; -webkit-transform: rotate(-44deg); -moz-transform: rotate(-44deg); -o-transform: rotate(-44deg); -ms-transform: rotate(-44deg); transform: rotate(-44deg); } 
    </style> 
</head> 
<body> 
    <nav class="navbar fixed-top navbar-expand-md navbar-dark bg-primary mb-3"> 
        <div class="flex-row d-flex"> 
            <button type="button" class="navbar-toggler mr-2 " data-toggle="offcanvas" title="Toggle responsive left sidebar"> 
                <span class="navbar-toggler-icon"></span> 
            </button> 
            <a class="navbar-brand" href="#" title="Free Bootstrap 4 Admin Template">Admin Template</a> 
        </div> 
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar"> 
            <span class="navbar-toggler-icon"></span> 
        </button> 
        <div class="navbar-collapse collapse" id="collapsingNavbar"> 
            <ul class="navbar-nav"> 
                <li class="nav-item active"> 
                    <a class="nav-link" href="#">Home <span class="sr-only">Home</span></a> 
                </li> 
                <li class="nav-item"> 
                    <a class="nav-link" href="//www.codeply.com">Link</a> 
                </li> 
            </ul> 
            <ul class="navbar-nav ml-auto"> 
                <li class="nav-item"> 
                    <a class="nav-link" href="#myAlert" data-toggle="collapse">Alert</a> 
                </li> 
                <li class="nav-item"> 
                    <a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a> 
                </li> 
            </ul> 
        </div> 
    </nav> 
    <div class="container-fluid" id="main"> 
        <div class="row row-offcanvas row-offcanvas-left vh-100"> 
            <div class="col-md-3 col-lg-2 sidebar-offcanvas h-100 overflow-auto bg-light pl-0" id="sidebar" role="navigation"> 
                <ul class="nav flex-column sticky-top pl-0 pt-5 mt-3"> 
                    <li class="nav-item"><a class="nav-link" href="#">Overview</a></li> 
                    <li class="nav-item"><a class="nav-link" href="#">Layouts</a></li> 
                    <li class="nav-item"><a class="nav-link" href="#">Templates</a></li> 
                    <li class="nav-item"><a class="nav-link" href="#">Themes</a></li> 
                    <li class="nav-item"><a class="nav-link" href="#">Last Item</a></li> 
                    <!-- 这里添加了data-container="body"属性 -->
                    <select class="selectpicker" data-live-search="true" data-container="body"> 
                        <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option> 
                        <option data-tokens="mustard">Burger, Shake and a Smile</option> 
                        <option data-tokens="frosting">Sugar, Spice and all things nice</option> 
                    </select> 
                </ul> 
            </div> <!--/col--> 
            <main class="col main pt-5 mt-3 h-100 overflow-auto"> 
                <h1 class="display-4 d-none d-sm-block"> Bootstrap Dashboard </h1> 
                <p class="lead d-none d-sm-block">Plus scrolling sidebar, based on Bootstrap 4</p> 
                <div class="alert alert-warning fade collapse" role="alert" id="myAlert"> 
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
                        <span aria-hidden="true">×</span> 
                        <span class="sr-only">Close</span> 
                    </button> 
                    <strong>Holy guacamole!</strong> It's free.. this is an example theme. 
                </div> 
                <div class="row mb-3"> 
                    <div class="col-xl-3 col-sm-6 py-2"> 
                        <div class="card bg-success text-white h-100"> 
                            <div class="card-body bg-success"> 
                                <div class="rotate"> 
                                    <i class="fa fa-user fa-4x"></i> 
                                </div> 
                                <h6 class="text-uppercase">Users</h6> 
                                <h1 class="display-4">134</h1> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="col-xl-3 col-sm-6 py-2"> 
                        <div class="card text-white bg-danger h-100"> 
                            <div class="card-body bg-danger"> 
                                <div class="rotate"> 
                                    <i class="fa fa-list fa-4x"></i> 
                                </div> 
                                <h6 class="text-uppercase">Posts</h6> 
                                <h1 class="display-4">87</h1> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="col-xl-3 col-sm-6 py-2"> 
                        <div class="card text-white bg-info h-100"> 
                            <div class="card-body bg-info"> 
                                <div class="rotate"> 
                                    <i class="fa fa-twitter fa-4x"></i> 
                                </div> 
                                <h6 class="text-uppercase">Tweets</h6> 
                                <h1 class="display-4">125</h1> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="col-xl-3 col-sm-6 py-2"> 
                        <div class="card text-white bg-warning h-100"> 
                            <div class="card-body"> 
                                <div class="rotate"> 
                                    <i class="fa fa-share fa-4x"></i> 
                                </div> 
                                <h6 class="text-uppercase">Shares</h6> 
                                <h1 class="display-4">36</h1> 
                            </div> 
                        </div> 
                    </div> 
                </div> <!--/row--> 
                <hr> 
                <a id="features"></a> 
                <hr> 
                <p class="lead mt-5"> Are you ready for Bootstap 4? It's the 4th generation of this popular responsive framework. Bootstrap 4 will include some interesting new features such as flexbox, 5 grid sizes (now including xl), cards, `em` sizing, CSS normalization (reboot) and larger font sizes. </p> 
                <div class="row my-4"> 
                    <div class="col-lg-3 col-md-4"> 
                        <div class="card"> 
                            <img class="card-img-top img-fluid" src="//placehold.it/740x180/bbb/fff?text=..." alt="Card image cap"> 
                            <div class="card-body"> 
                                <h4 class="card-title">Layouts</h4> 
                                <p class="card-text">Flexbox provides simpler, more flexible layout options like vertical centering.</p> 
                                <a href="#" class="btn btn-primary">Button</a> 
                            </div> 
                        </div> 
                        <div class="card card-inverse bg-inverse mt-3"> 
                            <div class="card-body"> 
                                <h3 class="card-title">Flexbox</h3> 
                                <p class="card-text">Flexbox is now the default, and Bootstrap 4 supports SASS out of the box.</p> 
                                <a href="#" class="btn btn-outline-secondary">Outline</a> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="col-lg-9 col-md-8"> 
                        <div class="table-responsive"> 
                            <table class="table table-striped"> 
                                <thead class="thead-inverse"> 
                                    <tr> 
                                        <th>#</th> 
                                        <th>Label</th> 
                                        <th>Header</th> 
                                        <th>Column</th> 
                                        <th>Data</th> 
                                    </tr> 
                                </thead> 
                                <tbody> 
                                    <tr> 
                                        <td>1,001</td> 
                                        <td>responsive</td> 
                                        <td>bootstrap</td> 
                                        <td>cards</td> 
                                        <td>grid</td> 
                                    </tr> 
                                    <tr> 
                                        <td>1,002</td> 
                                        <td>rwd</td> 
                                        <td>web designers</td> 
                                        <td>theme</td> 
                                        <td>responsive</td> 
                                    </tr> 
                                    <tr> 
                                        <td>1,003</td> 
                                        <td>free</td> 
                                        <td>open-source</td> 
                                        <td>download</td> 
                                        <td>template</td> 
                                    </tr> 
                                    <tr> 
                                        <td>1,003</td> 
                                        <td>frontend</td> 
                                        <td>developer</td> 
                                        <td>coding</td> 
                                        <td>card panel</td> 
                                    </tr> 
                                    <tr> 
                                        <td>1,004</td> 
                                        <td>migration</td> 
                                        <td>bootstrap 4</td> 
                                        <td>mobile-first</td> 
                                        <td>design</td> 
                                    </tr> 
                                    <tr> 
                                        <td>1,005</td> 
                                        <td>navbar</td> 
                                        <td>sticky</td> 
                                        <td>jumbtron</td> 
                                        <td>header</td> 
                                    </tr> 
                                    <tr> 
                                        <td>1,006</td> 
                                        <td>collapse</td> 
                                        <td>affix</td> 
                                        <td>submenu</td> 
                                        <td>flexbox</td> 
                                    </tr> 
                                    <tr> 
                                        <td>1,007</td> 
                                        <td>layout</td> 
                                        <td>examples</td> 
                                        <td>themes</td> 
                                        <td>grid</td> 
                                    </tr> 
                                    <tr> 
                                        <td>1,008</td> 
                                        <td>migration</td> 
                                        <td>bootstrap 4</td> 
                                        <td>flexbox</td> 
                                        <td>design</td> 
                                    </tr> 
                                </tbody> 
                            </table> 
                        </div> 
                    </div> 
                </div> <!--/row--> 
            </main> <!--/main col--> 
        </div> 
    </div> <!--/.container--> 
    <script> 
        $(document).ready(function() { 
            $('[data-toggle=offcanvas]').click(function() { 
                $('.row-offcanvas').toggleClass('active'); 
            }); 
        }); 
    </script> 
</body> 
</html>

内容的提问来源于stack exchange，提问作者user35054