container에서 fluid를 더 해 container-fluid로 변경했다. 레이아웃을 1단으로 하고 노트북을 하다보니 화면이 작게 보여서 fluid가 괜찮았다. 그런데 화면이 큰 모니터를 사용하면 fluid가 어떻게 보일지... 참고로 fulid를 사용하면 경계가 브라우저 앞 옆이다. 그리고 lg-12를 사용하니 왼쪽과 오른쪽 여백이 너무 없는 것 같아 lg-11로 했고 1은 여백이다.
사이드바에서 두 개를 같은 너비로 하고 싶었는데 그때 그리드릴 col를 사용하면 된다는 것을 알았다. lg에서 같은 너비를 같도록 col-lg를 사용했다. 만약 xs에서 같은 너비를 원한다면 col을 사용하면 될 것이다. 나는 class="col-sm" 라고 정의하면 두 개의 사이드바는 같게 되게 xs에서는 하나인 12가 된다. 크롬으로 봤더니 아이패드, 아이패드 프로, 노트북 등에서 두 개로 나왔고 스마트폰 등에서 하나로 정렬됐다. 참고로 부트스트랩에서 sm은 일반적으로 태블릿을 말한다.
이 글은 https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php을 보고도 이해할 수도 있다. 만약 스마트폰에서도 동일한 두 개의 사이드바를 원한다면 class="col"이라고만 하면 된다.
부트스트랩5에서 기본적인 다이내믹한 컨포넌트 (0) | 2021.05.20 |
---|---|
여기에서 부트스트랩 5를 시작하기로 했다. (0) | 2021.05.15 |