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"이라고만 하면 된다. 

About. 블로그, 부트스트랩,프로그램 등 유용한 정보를 마음껏 적고 있습니다.
전체 방문자 수 명은 2003.11.부터 누적된 방문자 수입니다. 그리고 아래 그래프는 일주일 간 방문자 통계입니다.