[Bootstrap] Grid Gutters 제거, Badge 텍스트 정렬

JY·2022년 6월 10일
0

Grid Gutters 제거


제거 전

제거 후

  • gx-*: 수평 gutter
  • gy-*: 수직 gutter
  • g-*: 수평 및 수직 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

Badges 텍스트 정렬


개발자 도구로 웹 상에서 확인했을 때는 수평 정렬이 정상적으로 되어있다.

그런데 실제 모바일 기기로 접속하니 다음처럼 수평 정렬이 되어있지 않았다.

다음처럼 스타일을 적용해주니 해결할 수 있었다.

<Badge 
  pill bg="dark" type="button"
  style={{ display: "inline-flex", alignItems: "center" }}
>
  ...
</Badge>

profile
🙋‍♀️

0개의 댓글