4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
안녕하세요, 포트폴리오 3번 실습하며 부트스트랩을 이용하는데 반응형 column이 안되는 부분이 있습니다 총 3군데에서 반응형 column을 쓰는데 한 부분 (dashboard) 만 안되는걸 보니 뭔가 중간에 꼬인거 같습니다;;; 이하 첨부합니다.. <HTML>
<!--dashboard with 4 boxes--> <div class="grid-content-dashboard"><div class="container text-center"> <div class="row align-items-start"> <h2 style="padding-top: 20px; text-align:left; ">Dashboard</h2> <div class="col-lg-3 col-md-12 grid-content-whitebox" style="border-left: 5px solid #12c9c9;"> <h4>Earnings (Monthly)</h4> <p> $400,000</p> <div class="grid-content-icon"><i class="fa-solid fa-briefcase fa-2xl"></i></div> </div> <div class="col-lg-3 col-md-12 grid-content-whitebox" style="border-left: 5px solid green;"> <h4>Earnings (Annual)</h4> <p> $800,000</p> <div class="grid-content-icon"><i class="fa-solid fa-dollar-sign fa-2xl"></i></div> </div> <div class="col-lg-3 col-md-12 grid-content-whitebox" style="border-left:5px solid navy;"> <h4>Tasks</h4> <p>13</p> <div class="grid-content-icon"><i class="fa-solid fa-list-check fa-2xl"></i></div> </div> <div class="col-lg-3 col-md-12 grid-content-whitebox" style="border-left: 5px solid #fcbe03;"> <h4>Requests</h4> <p>26</p> <div class="grid-content-icon"><i class="fa-solid fa-comments fa-2xl"></i></div> </div> </div> </div> </div> <CSS>.grid-content{ grid-column: 2/5; grid-row: 2/5;} .grid-content-dashboard{ margin-top: 30px; margin-left:-27%; column-gap: 40px; } .grid-content-whitebox{ width:21%; height: 120px; background-color: white; padding-left: 10px; margin-right:20px; margin-top: 30px; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: left;} .grid-content h4{ padding-top: 20px; padding-left: 5px; font-size: 18px; font-weight:400; } .grid-content p{ padding-left: 5px; font-weight: 500; font-size: 25px; } .grid-content-icon{ height: 100%; width: 30%; margin-top: -20%; float: right; display:inline-block; text-align: center; }
답변 감사드립니다 width 를 지웠더니 모바일 반응형은 되는데 이젠 pc 사이즈에서 column들이 row에 다 들어가지 않는 상황이 되었습니다..;;; stack overflow좌의 의견을 들어보니 아무래도 제 커스텀 클래스의 스타일링이 문제인거 같은데 아무리 봐도 width는 없는데 왜 이럴까요? parent div를 container로 바꾸어도 보고 박스 height을 rem으로도 바꾸어보았고 font awesome에 준 float을 지우고 마진 %로 대체하기도 했는데 column이 4개니 col-lg-3이면 알아서 네개가 일렬로 들어가야하는데 column들이 큰 상태여서 저 마지막 하나가 안들어가요.. parent div인 grid-content-dashboard에는 width 설정 없이 container class 추가하고 이렇게 마진만 준 상태입니다 .grid-content-dashboard{ margin-top: 30px; margin-left:-20%; }뭔가 해법은 뒤에 세미콜론 안찍었거나 클래스에 점을 안찍었거나 이런 어처구니없는거일거 같은데 못찾겠습니다;;
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.