Использование Angular Material2 с CSS Bootstrap4 для макетов сетки

Angular Material2 (alpha.7) не имеет адаптивного компонента сетки, такого как < href="http://v4-alpha.getbootstrap.com/layout/grid/" rel="noreferrer">система начальной загрузки. Система макетов/сеток в bootstrap позволяет создавать адаптивные макеты (которые адаптируются к размеру экрана без необходимости писать css с использованием пользовательских медиа-запросов и вычислять значения пикселей для точек останова), что чрезвычайно полезно.

Я заметил проблемы с отступами/заполнением компонентов material2 при включении bootstrap css в проект material2. Например: md-card компоненты начинают перекрываться.

Есть ли способ, чтобы эти 2 библиотеки хорошо работали вместе?

OR

Есть ли способ получить бутстрап, похожий на адаптивный макет/сетку в material2, без включения бутстрапа css?


angular bootstrap-4 angular-material2
person Pranjal Mittal    schedule 20.08.2016    source источник
comment
Я думаю, они будут хорошо работать вместе. Не пробовал раньше.   -  person Mithun Pattankar    schedule 20.08.2016
comment
почему вы хотите перенести макет сетки начальной загрузки в material2, если вы можете просто использовать github.com/angular/flex-layout ? Таким образом, вы можете вообще забыть о начальной загрузке.   -  person angularrocks.com    schedule 25.08.2017

Ответы (2)


arrow_upward
4
arrow_downward

Bootstrap и Material2 хорошо работают вместе (почти). Проблема, с которой я столкнулся со странными отступами/полями, заключалась в том, что я пытался использовать grid list вместе с системой сетки Bootstrap, и проблема была решена после того, как я прекратил использовать grid-list и полностью переключился на Bootstrap для макетов строк/столбцов. Затем я смог использовать другие компоненты material2, такие как md-card и т. Д., Без проблем с макетом.

При использовании Bootstrap хорошей идеей может быть отказ от использования компонента material2 grid-list или наоборот. Я не совсем уверен, почему эта проблема возникает, но это произошло в моем случае.

В качестве альтернативы, возможно, стоит изучить CSS3 Flexbox для более мощного управления компоновкой, которое избавит от необходимости использовать Bootstrap или grid-list.

person Pranjal Mittal    schedule 07.10.2016
comment
Для полноты картины в настоящее время рекомендуемым решением для макета с Angular Material 2 является @angular/flex-layout, который представляет собой абстракцию Angular от CSS Flexbox в сочетании с некоторыми директивами адаптивного макета. - person Red3; 17.10.2017

arrow_upward
3
arrow_downward

Я думаю, вы можете скомпилировать только код Bootstrap 4 Sass для сетки в одном файле CSS. И свяжите этот CSS в src/index.html файле вашего Angular Material2.

Сначала скомпилируйте код CSS только для сетки (и классов сетки). Исходный код Bootstrap уже содержит bootstrap-grid.scss Sass-файл. Как говорят его комментарии:

// Bootstrap Grid only
//
// Includes relevant variables and mixins for the regular (non-flexbox) grid
// system, as well as the generated predefined classes (e.g., `.col-4-sm`).

Вам придется скомпилировать bootstrap-grid.scss вместо bootstrap.scss в код CSS. Обратите внимание, что Bootstrap требует запуска автопрефиксера postCSS.

После компиляции файла CSS вы можете связать его в файле src/index.html следующим образом:

<link href="bootstrap-gridonly.css" rel="stylesheet">

Наконец, вы должны проверить, использует ли Angular Material2 сброс CSS. Bootstrap 4 поставляется с новым модулем перезагрузки, который расширение Normalize.css. Модуль перезагрузки и особенно box-sizing: border Параметр -box требуется для сетки Bootstrap.

person Bass Jobsen    schedule 03.09.2016