Angular ui-选择组件:迁移到Bootstrap 4后损坏
Angular ui-选择组件:迁移到Bootstrap 4后损坏
提问于 2018-02-15 17:27:06
我的应用程序中有一个非常简单的ui-select组件，如以下示例所示：http://angular-ui.github.io/ui-select/demo-basic.html
从Bootstrap 3迁移到Bootstrap 4后，组件仍然在这里，但不显示结果。
到目前为止，我已经尝试了：
，
- ，我使用控制台检查它们是否在代码中，它们是否在代码中。
- 我尝试将
dropdown-item类添加到结果中，但没有成功
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-02-15 17:27:06
在BS4中，只有当show类与dropdown-menu类一起存在时，才会显示菜单，否则不会显示：
.dropdown-menu.show {
display: block;
}为了解决我的问题，我不得不从BS3获取这一部分，并将其复制到我自己的应用程序样式中：
.open > .dropdown-menu {
display: block;
}我很清楚这不是正确的方式，但是在angular-ui接收到BS4就绪更新之前，它可以做到这一点。
Stack Overflow用户
发布于 2019-05-15 22:06:26
我也有同样的问题，在Style.css中添加以下css类解决了这个问题。
/**
* ui-select.bootstrap4.shim.css
*
* Adapt `bootstrap` (v3) theme from AngularJS `ui-select`
* component to Bootstrap v4.x look and feel.
* Bootstrap v4.x look and feel
*
* Feel free to test and open issues and pull requests.
*
* @see https://angular-ui.github.io/ui-select/
*
* @project ui-select.bootstrap4.shim.css
* @version 1-20180706
* @author Francis Vagner dos Anjos Fontoura
* @copyright 2018 by the author
* @cssdoc version 1.0-pre
* @license MIT
*/
.pull-left {
float: left !important;
}
.caret {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid;
display: inline-block;
margin-left: 0;
vertical-align: middle;
width: 0;
}
.pull-right {
float: right !important;
}
.ui-select-toggle.btn {
border: 1px solid #ced4da;
}
.ui-select-choices.dropdown-menu {
display: block;
}
.ui-select-match-text {
max-height: 24px;
}
.ui-select-match.btn-default-focus {
border-radius: .25rem;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
outline: 0;
}
.ui-select-match.btn-default-focus > .ui-select-toggle {
border-color: #80bdff;
}
Stack Overflow用户
发布于 2018-07-25 05:23:22
我也遇到了同样的问题，在看到ui-select需要为bootstrap 4做大量的工作后，我写了一个小指令来替换它。
我们的目标也是在bootstrap 4中保持它的简单性和原生性。
它可以在npm上找到。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48803798
复制相关文章
相似问题