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

时间:2018-10-22 03:27:48

标签: css angular twitter-bootstrap-3 ng-bootstrap typehead

我用过ng Typeahead Open on focus的输入,我的冲突是他们正在使用bootstrap-4,但是我在项目中使用了bootstrap 3,因此,针对重点开放的引导程序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

1 个答案:

答案 0 :(得分: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
}

相关问题