angular-ui-bootstrap - Angular ui-select 组件 : Broken after migrating to Bootstrap 4

Question

我的应用程序中有一个非常简单的 ui-select 组件，如下例所示: http://angular-ui.github.io/ui-select/demo-basic.html

从 Bootstrap 3 迁移到 Bootstrap 4 后，组件还在，但结果不显示。

到目前为止我已经尝试过:

1. 我使用控制台检查它们是否在代码中，它们确实在。
2. 我尝试将 dropdown-item 类添加到结果中，但没有成功

Answer 1

我遇到了同样的问题，将以下 css 类添加到 Style.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;
}

引用:https://github.com/francisfontoura/angularjs.ui-select.bootstrap4.shim.css/blob/master/ui-select.bootstrap4.shim.css