How to make bootstrap cards same height in card, 카드 높이 고정하는 방법
문제상황
여러개의 card 컴포넌트들을 included 하고 있는 화면을 작업중이였는데, div tag 와 겹쳐져서 height가 약간 틀어지는 상황이 발생했다. 그래서 열심히 구글링을 했다!
1번 방법
https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height
위 사이트에서 다음과 같은 코드를 얻을 수 있었다.
<div class="container">
<div class="row ">
<div class="col-md-4" style="background-color: red">
some content
</div>
<div class="col-md-4" style="background-color: yellow">
catz
<img width="100" height="100" src="https://placekitten.com/100/100/">
</div>
<div class="col-md-4" style="background-color: green">
some more content
</div>
</div>
</div>
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
text용으로 text.html을 만들어 위 코드를 활용할 경우에는 잘 작동했지만, 작업하던 코드와 합치려고 하면 원하는 모양대로 나오지 않았다. 그래서 다시 구글링을 했다. 더 상세한 키워드로 ..
2번 방법
<div class="container-fluid content-row">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="card h-100">
… content card …
</div>
</div>
… all the other cards …
</div>
</div>
h-100 를 class 속성에 추가해주었더니 매우 간단하게 해결 되었다. 😅😅😅 프로젝트 코드 내에서는 거의 8개의 카드 컴포넌트가 있어서, row 속성에 mb-3 정도의 마진을 추가해주니 아주 예쁘게 잘 맞게 정렬됨! 짝짝짝!!!
생각
추후에 생각을 해봤는데, 첫번째 방법을 사용해도 적용이 가능할 것 같다. row에 mb-3을 주는 방법을 또 몰라서 헤매다가 2번을 찾은 거였는데 .. (그냥 1번 코드의 잘못이라고 생각했음ㅋㅋㅋㅋ)
2번 방법을 적용하던 도중 불현듯 마진 설정하는 방법이 떠올라서 적용하니까 완벽하게 된 것을 보니...아마도 적용이 가능할 것이라고 본다.
하지만 2번 방법은 굉장히 간단한 코드 몇자를 통해 해결 가능하니 이런 문제가 발생하면 2번 방법을 쓰는 걸로 ! 👍
Author And Source
이 문제에 관하여(How to make bootstrap cards same height in card, 카드 높이 고정하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leyuri/How-to-make-bootstrap-cards-same-height-in-card-카드-높이-고정하는-방법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)