Использование углового материала2 с Bootstrap4 css для раскладки сетки

Question

Angular Material2 (alpha.7) не имеет ответной составляющей сетки, например bootstrap grid system. Система макетов/сетки в бутстрапе позволяет создавать адаптивные макеты (которые приспосабливаются к размеру экрана, не имея дело с написанием css с использованием пользовательских запросов к мультимедиа и вычислением значений пикселей для точек останова), что очень полезно.

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

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

ИЛИ

Есть ли способ, чтобы получить самозагрузки, как реагировать благости макета/сеток в Материал2 без учета начальной загрузки CSS?

Answer 1

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

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

// 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 autoprefixer.

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

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

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

Answer 2

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

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

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