ng-bootstrap 在焦点输入字段上打开 css 不工作

Question

我用过 ng Typeahead Open on focus 输入，我的冲突是他们正在使用 bootstrap-4 但我已经为我的项目使用了 bootstrap 3，bootstrap 3 因为焦点打开无法正常工作，任何一个知道如何在 bootstrap 3 上实现吗？

html

<input
  id="typeahead-focus"
  type="text"
  class="form-control"
  [(ngModel)]="model"
  [ngbTypeahead]="search"
  (focus)="focus$.next($event.target.value)"
  (click)="click$.next($event.target.value)"
  #instance="ngbTypeahead"
/>

stackblitz code here

Answer 1

只需在您的 style.css 中添加以下 css，您的项目将显示良好，例如：

.dropdown-item {
 display: block;
 width: 100%;
 padding: .25rem 1.5rem;
 clear: both;
 font-weight: 400;
 color: #212529;
 text-align: inherit;
 white-space: nowrap;
 background-color: transparent;
 border: 0
}

.dropdown-item:focus,
.dropdown-item:hover {
 color: #16181b;
 text-decoration: none;
 background-color: #f8f9fa
}

.dropdown-item.active,
.dropdown-item:active {
 color: #fff;
 text-decoration: none;
 background-color: #007bff
}

.dropdown-item.disabled,
.dropdown-item:disabled {
 color: #6c757d;
 background-color: transparent
}

.dropdown-menu.show {
 display: block
}

.dropdown-header {
 display: block;
 padding: .5rem 1.5rem;
 margin-bottom: 0;
 font-size: .875rem;
 color: #6c757d;
 white-space: nowrap
}