제거 전
제거 후
gx-*
: 수평 guttergy-*
: 수직 gutterg-*
: 수평 및 수직 gutter<Col md={12} lg={12}>
<Container >
<Row className="row gx-0">
...
</Row>
</Container>
</Col>
Ref
https://runebook.dev/ko/docs/bootstrap/layout/gutters/index
개발자 도구로 웹 상에서 확인했을 때는 수평 정렬이 정상적으로 되어있다.
그런데 실제 모바일 기기로 접속하니 다음처럼 수평 정렬이 되어있지 않았다.
다음처럼 스타일을 적용해주니 해결할 수 있었다.
<Badge
pill bg="dark" type="button"
style={{ display: "inline-flex", alignItems: "center" }}
>
...
</Badge>