Angular ui-select 组件：迁移到 Bootstrap 4 后损坏

Question

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

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

到目前为止我尝试过的：

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

Answer 1

结果在 BS4 中，仅当 show class 与 dropdown-menu class 一起出现时才显示菜单，否则不显示：

.dropdown-menu.show {
      display: block;
}

为了解决我的问题，我不得不从 BS3 中提取这一部分并将其复制到我自己的应用程序样式中：

.open > .dropdown-menu {
     display: block;
}

我很清楚这不是正确的方法，但在 angular-ui 收到 BS4 就绪更新之前它会起作用。

Answer 2

我遇到了同样的问题，在看到 ui-select 需要大量工作才能修复 bootstrap 4 之后，我写了一个小指令来替换它。

我们的目标也是在 bootstrap 4.

中保持简单并看起来很原生

npm.

有售

Answer 3

我遇到了同样的问题，添加以下 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

Angular ui-select 组件：迁移到 Bootstrap 4 后损坏

Angular ui-select component : Broken after migrating to Bootstrap 4

angular-ui-bootstrap

bootstrap-4