안녕하세요~
부트스트랩 버전이 v5.0 이상이라서 기존 강의에서 정상 작동해야하는 기능들이 몇개 작동되지 않습니다.
제가 뭔가 설정이 꼬여서 잘못된 건지는 모르겠습니다만... 선생님 코드를 복붙해도 되지 않았습니다.
혼자 끙끙 앓고 계시는 분들이 있거나.. 혼자 삽질하고 있는게 힘드실 분들을 위해서
제가 해결한 내용을 공유합니다. 🙂
1. footer 이미지크기와 가운데 오지 않는 현상
d-flex justify-content-center
<footer th:fragment="footer">
<div class="d-flex justify-content-center">
<img class="mb-2" src="/images/logo_long_kr.jpg" width="100">
<small class="d-block mb-3 text-muted">© 2020</small>
</div>
</footer>2. main-nav 에서 오른쪽에 버튼이 가지 않는 현상
justify-content-between
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">3. dropdown 이 작동하지 않는 현상
data-toggle="dropdown" ( X ) data-bs-toggle="dropdown" ( O )
4.toggle-tab 이 작동하지 않는 현상
data-toggle="pill" ( X )
data-bs-toggle="pill" ( O )
5. alert message에 ' x ' 표시 클래스가 적용되지 않는 현상
class="close" data-dismiss="alert" ( X )
class="btn-close" data-bs-dismiss="alert" ( O )
<div th:if="${message}" class="alert alert-info alert-dismissible fade show mt-3" role="alert"> <span th:text="${message}">완료</span> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true"></span> </button> </div>
6. File input
<label for="profile-image-file" class="form-label custom-file-label"></label> <input class="form-control custom-file-input" type="file" id="profile-image-file">
7. Button-Block
class="btn btn-outline-primary btn-block" ( X ) class="mt-3 d-grid gap-2" ( O )
5버전으로 넘어오면서 btn-block은 사라지고 부모 요소에 d-grid를 주어야 자식 요소들을 block 지정할 수 있게 됐습니당
잘못된 점 있으면 말씀해주세요!
감사합니다!
\(@^0^@)/
