代码之家 › 专栏 › 技术社区 › core114

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

typehead ng-bootstrap twitter-bootstrap-3 angular css

core114 · 技术社区 · 8 年前

我已经用过NG打字机了 Open on focus 输入,我的冲突是他们正在使用 bootstrap-4 但我用过 bootstrap 3 对于我的项目,bootstrap 3对于open-on-focus不起作用,有人知道如何在bootstrap3上起作用吗?

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 回复 | 直到 8 年前

Kishan 8 年前

只需在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
}

推荐文章

Hector · ng引导带垂直选项卡?

8 年前

Francis Ngueukam · ngbTimepicker未在具有反应形式的ngbmodal中工作

8 年前

aaa_ro · 具有Angular4的一种形式的多个ngb计时器

8 年前

Shahriar Hasan Sayeed · 我们可以在Angular 4项目中使用ng引导程序吗?

8 年前

redOctober13 · 使用NgbDatepicker的角度单元测试失败

8 年前

Murad Khan · 如何向StaticInjector-Angular 5提供HttpClient?

8 年前

NDDT · 为什么我的引导样式应用不正确?

8 年前

Feroz Siddiqui · Angular—哪个引导程序最适合开发Angular cli应用程序

8 年前

Shan-Desai askovpen · 无需按钮,通过函数调用触发NgbModal

8 年前

Joseph Charles · ng引导中的StaticInjectionError

8 年前