问题描述
下面是一个完整的HTML可复制示例。当使用引导选择中的selectpicker类时，实时搜索框在单击该框时会在边栏中向左流动，并且在用户界面中不可见。使用较早版本的引导程序不会发生这种情况，但是我现在正在迁移到较新版本。我看不到根本原因，其他人是否有建议的修复程序？
<!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,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>
<select class="selectpicker" data-live-search="true">
<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> 解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）