크와앙

<문제상황>

Bootstrap을 통해서 <div>에 container-fluid 클래스를 추가했음에도, 좌우에 여백이 생기는 문제가 발생하였다.
CSS를 찾아보니 아래와 같이 설정되어 있었다.

      --bs-gutter-x: 1.5rem;

해결방법 1: css를 그냥 수정하는 방법

--bs-gutter-x라는 요소가 좌우 간격을 띄우는 역할을 했다.

.container-fluid {
      --bs-gutter-x: 0; /* container-fluid 설정 시에, 좌우에 공백생기는 걸 제거 */
}

해결방법 2: 클래스 추가

--bs-gutter-x가 gutter라는 것을 확인한 뒤에, gutter를 0으로 설정하는 클래스가 있는지 확인했다.
그리고, 해당<div>에만 g-0 클래스를 추가했다.

<div class="container-fluid g-0">
	/* 내용 */
</div>