CS/Vue3

v-row

재E 2024. 12. 6. 10:18
<div style="width: 45%">
      <v-row class="d-flex custom-row">
        <v-col cols="6">1</v-col>
        <v-col cols="4">2</v-col>
        <v-col cols="2">3</v-col>
      </v-row>
  </div>

v-row에 밑줄을 그려야 하는 상황

<style lang="scss" scoped>
.custom-row {
  // border: 1px solid red;
  border-bottom: 1px solid #3e4b5c !important;
}
</style>

개발자 도구에도 border-bottom이 적용된 것을 볼 수 있었으나

화면엔 여전히 적용되지 않는 모습을 보인다.

이때까지는 v-row가 당연 div랑 같은 모양일 것이라 생각하였다.

전체 border 효과를 적용시키니 위 그림처럼 화면에 출력되었다.

v-row는 div와 모양이 달랐던 것!!

이제와서 이걸 알다니!! 그래도 일단 메모메모