앵귤러 머티리얼 2를 부트 스트랩 4 CSS와 함께 사용하여 격자 레이아웃

Question

Angular Material2 (alpha.7)에는 bootstrap grid system과 같은 반응 형 그리드 구성 요소가 아직 없습니다. 부트 스트랩의 레이아웃/그리드 시스템은 대단히 유용한 맞춤형 미디어 쿼리와 관련된 CSS 작성 및 중단 점에 대한 픽셀 값 계산과 관련없이 반응 형 레이아웃 (스크린 크기에 적응하는 레이아웃)을 만들 수 있습니다.

material2 프로젝트에서 부트 스트랩 CSS를 포함하여 material2 구성 요소의 여백/패딩에 문제가 있음을 발견했습니다. 예 : md-card 구성 요소가 겹쳐지기 시작합니다.

두 라이브러리를 함께 사용하는 방법이 있습니까?

또는

부트 스트랩 CSS를 포함하지 않고 Material2에의 반응 레이아웃/그리드 선 (善)과 같은 부트 스트랩을 얻을 수있는 방법이 있나요?

Answer 1

단일 CSS 파일에서 그리드에 대한 부트 스트랩 4의 Sass 코드 만 컴파일 할 수 있다고 생각합니다. 그리고이 CSS를 앵커 소재의 파일 src/index.html에 링크하십시오.

먼저 그리드 (및 그리드 클래스)에 대해서만 CSS 코드를 컴파일하십시오. 부트 스트랩의 소스 코드에 이미 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`). 

당신은 CSS 코드로 bootstrap-grid.scss 대신 bootstrap.scss을 컴파일해야합니다. Bootstrap은 postCSS 자동 접두어를 실행해야합니다. 다음과 같이

CSS 파일을 컴파일 한 후에는 그것을 src/index.html 파일에 링크 할 수 있습니다 : 각도 Material2에 또한 CSS 리셋을 사용하는 경우

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

마지막으로 당신이 확인해야합니다. 부트 스트랩 4에는 Normalize.css의 확장자 인 새로운 Reboot module이 함께 제공됩니다. 부트 스트랩의 그리드에는 재부팅 모듈, 특히 box-sizing: border-box 설정이 필요합니다.

Answer 2

부트 스트랩과 소재 2가 서로 잘 어울립니다 (거의). 이상한 패딩/여백 문제는 grid list 구성 요소와 부트 스트랩 그리드 시스템을 함께 사용하려고했기 때문에 그리드 목록을 사용하지 않고 행/열 레이아웃에 대한 부트 스트랩으로 완전히 전환 한 후에 문제가 해결되었습니다. 그런 다음 레이아웃 문제가없는 md-card 등의 다른 material2 구성 요소를 사용할 수있었습니다.

Bootstrap 2 재료를 사용하지 않는 경우 grid-list 구성 요소를 사용하는 것이 좋을 수도 있습니다. 나는이 문제가 왜 일어나는 지 완전히 확신하지는 않지만 내 경우에는 일어난다.

또는 Bootstrap 또는 grid-list을 사용할 필요가 없도록보다 강력한 레이아웃 관리를 위해 CSS3 Flexbox을 학습하는 것이 유용 할 수 있습니다.