Я создал проект angular с фреймворком Ioni c, но хочу также использовать Bootstrap, Как я его использую,
Я установил bootstrap и изменил angular. json файл, как показано ниже:
"styles": [
{
"input": "src/assets/styles/theme/variables.scss"
},
{
"input": "src/assets/styles/global.scss"
},
{
"input": "node_modules/bootstrap/dist/css/bootstrap.min.css"
}
],
После изменения, как указано выше, я могу использовать Bootstrap компоненты, но они не реагируют,
MY HTML:
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Мой вывод: вывод
т.е. кнопки занимают всю ширину экрана
Я чувствую, что Bootstrap не реагирует после добавления с помощью Ioni c framework исправьте меня Если я ошибаюсь, я не знаю, как продолжить, может ли кто-нибудь мне помочь.
Если я прокомментирую все указанные ниже файлы в variable.s css, то bootstrap работает нормально, но я хочу использовать bootstrap и Ioni c вместе
/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";
// /* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';
/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";