Кнопка переключения, кажется, не имеет CSS - PullRequest
Новая
       42

Кнопка переключения, кажется, не имеет CSS

0 голосов
/ 23 октября 2018

Мне нужно создать выпадающую кнопку, поэтому я установил bootstrap и ng-boostrap.Это мой html: 

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
    </div>
</div>

, и в моем app.module.ts я вставил: 

imports:{
    NgbModule.forRoot()}

Я только что добавил загрузочный css в мой файл angular.json.

Проблема в том, что выпадающий список выглядит серым, как будто он не имеет CSS.Я не знаю в чем проблема.Кто-нибудь может мне помочь?

РЕДАКТИРОВАТЬ Мой файл angular.json имеет это: 

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.css"
            ],

Ответы [ 2 ]

0 голосов
/ 29 июля 2019

Я решил эту проблему, добавив строку: 

@import '~bootstrap/dist/css/bootstrap.min.css'

в мой файл / src / styles.css .

(Вам нужен bootstrap или bootstrap-Установлен только css. Для установки выполните команду npm install bootstrap-css-only --save)

0 голосов
/ 23 октября 2018

Шаг 1) install @ ng-bootstrap / ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

Шаг 2) Импорт пакета ng-bootstrap в файл app.module.ts 

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbModule, ...],
  ...
})
export class AppModule {
}

Примечание: не нужно делать NgbModule.forRoot ()

Шаг 3) Используйте html-код в файле app.component.html 

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
    </div>
</div>

Я создал тот же пример, который разветвляется из ng-bootstrap.
Просмотреть демонстрацию

Надеюсь, это поможет вам.

...