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와 모양이 달랐던 것!!
이제와서 이걸 알다니!! 그래도 일단 메모메모