[Vue.js][Ch4][영화검색 사이트] Container - 너비 사용자 지정

화면이 줄어들면 한줄에 표시되는 영화 개수는 줄어들지만, CSS 문제가 있다.

=> 컨테이너의 너비를 수정한다.

bootstrap Sass

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

• 컨테이너 크기를 입맛에 맞게 정의할 수 있다.

main.scss

// Default variable overrides
$primary: #b62fcd;    // primary라는 이름을 갖는 변수들이 #FDC000로 활용됨
$container-max-widths: (
  sm: 540px,
  md: 704px,
  lg: 924px,
  xl: 1140px,
  xxl: 1364px
);

// Required
@import "../../node_modules/bootstrap/scss/functions";    // 경로를 상대경로로 바꿔줘야 함.
// Required
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/root";
 @import "../../node_modules/bootstrap/scss/bootstrap";  // .scss 확장자 생략

• 한줄에 영화가 최대 6개 표시되게 구현