Bootstrap 4에서 carousel의 indicator를 둥글게하는 방법

1531 단어 scssBootstrapCSSCarouselbootstrap4
Bootstrap4에서는 Carousel(이미지를 슬라이드시키는 녀석입니다)의 indicator(몇 장째를 표시하고 있는지를 나타내는 것)가 직사각형으로 되어 있습니다.

사용하지 않았기 때문에 모르겠지만 Bootstrap3에서는 둥근 것 같습니다.

다만, 개인적으로는 둥글게 하고 싶었으므로 이하와 같이 CSS(정확하게는 SCSS)를 설정하는 것으로 둥글게 했습니다.
$carousel-indicator-length: 10px;

.carousel-indicators {
  & li {
    border-radius: 50%;
    margin: 1px 3px;
    height: $carousel-indicator-length;
    max-width: $carousel-indicator-length;
  }
}

너비와 높이를 동일하게 하고 border-radius 로 모퉁이를 둥글게 하고 있을 뿐입니다.
아래와 같이 되었습니다.
첫 Ruby on rails Bootstrap 도입편 [Memo for neko]
flexbox로 단조를 할 때는, 대량의 텍스트가 들어간 경우를 상정하자

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage