Vue 프로젝트 Container 너비 사용자 지정

 

Vue 프로젝트 Container 너비 사용자 지정

 

1. /src/scss/main.scss 수정

 

// Default variable overrides
$primary: #FDC000;
$container-max-widths: (
  sm: 540px,
  md: 704px,
  lg: 924px,
  xl: 1140px,
  xxl: 1364px
);

// Required
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

@import "../../node_modules/bootstrap/scss/bootstrap";

 

2. /src/components/MovieList.vue 수정

 

... 생략

<style lang="scss" scoped>
@import "~/scss/main";

.container {
  margin-top: 30px;
  .inner {
    background-color: $gray-200;
    padding: 10px 0;
    border-radius: 4px;
  }
  .movies {
    ...생략
  }
}
</style>

 

---

 

참고

https://getbootstrap.com/docs/5.1/layout/containers/

Containers