Question

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

从Bootstrap 3迁移到Bootstrap 4.组件仍在此处但未显示结果。

到目前为止我已尝试过：

我使用控制台检查它们是否在代码中，它们是。
我尝试将dropdown-item课程添加到结果中，但它不起作用

Answer 1

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

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

要解决我的问题，我必须从BS3获取此部分并将其复制到我自己的应用程序样式中：

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

我很清楚这不是正确的方法，但是它会一直有效，直到angular-ui收到BS4就绪更新。

Answer 2

我遇到了同样的问题，并在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;
}

参考：https://github.com/francisfontoura/angularjs.ui-select.bootstrap4.shim.css/blob/master/ui-select.bootstrap4.shim.css

Answer 3

我遇到了同样的问题，看到ui-select需要为引导程序4修复很多工作后，我写了一条小指令来替换它。

目标也是使它保持简单并在Bootstrap 4中看起来原生。

它在npm上可用。

Angular ui-select组件：迁移到Bootstrap 4后断开

3 个答案: