bootstrap-select插件与bootstrap输入框样式冲突

发布于 2022-09-12 04:28:03 字数 1760 浏览 21 评论 0

我使用了bootstrap的自定义选择https://getbootstrap.net/docs/components/input-group/#custom-select
然后使用了bootstrap-select插件,这个样式就不对了,选择框出来了,请问有什么好的解决方法吗

image.png

可以查看jsrun
或者下面的代码块直接在本地建HTML文件运行

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.8/css/bootstrap-select.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.8/js/bootstrap-select.min.js"></script>


</head>
<body>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
  </div>
  <select class="custom-select selectpicker" id="inputGroupSelect01" multiple>
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<script>
$(function () {
    $('.selectpicker').selectpicker();
});
</script>
</body>
</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

戴着白色围巾的女孩 2022-09-19 04:28:03

bootStrap自带样式custom-select影响的,去掉就好了...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文