ng-bootstrap 打开焦点输入字段 css 不起作用

Posted 2023-05-08

【中文标题】ng-bootstrap 打开焦点输入字段 css 不起作用

【英文标题】：ng-bootstrap Open on focus input field css not working

【发布时间】：2019-03-26 02:19:36

【问题描述】：

我使用了 ng Typeahead Open on focus 输入，我的冲突是他们正在使用bootstrap-4，但我在我的项目中使用了bootstrap 3，引导程序 3 打开焦点无法正常工作，有人知道如何在引导程序 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

【问题讨论】：

stackblitz 正在工作

@Chellappan stackblitz 工作正常，但 css 不工作，请检查一下

我认为 ng-bootstrap 只支持 bootstrap4 检查这个github.com/ng-bootstrap/ng-bootstrap/issues/998

【参考方案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

【讨论】：

我已经使用了你的 stackblitz 并将 CSS 放在 style.css 中，它工作正常并显示正确的标签。