부트스트랩 CSS의 Label이 줄바꿈 시 겹치는 현상.

조회수 3989회

부트스트랩 Label 질문 입니다.

우선 아래의 이미지처럼 인라인이었던 레이블이 브라우저 크기를 줄이면 줄바꿈이 되면서

이미지

아래의 이미지처럼 첫번째 라인의 label과 겹치게 됩니다.

이미지

개행되면 기본 마진이 적용되는것이 아닌가요?

제 HTML과 CSS는 아래와 같습니다.

HTML :

            <div class="slabel">
            <a href=""><span class="label label-primary">1</span></a>
            <a href=""><span class="label label-danger">2</span></a>
            <a href=""><span class="label label-success">3</span></a>
            <a href=""><span class="label label-default">4</span></a>
        </div>

CSS :

.slabel {
display:inline-block;
padding-top:0;
padding-bottom:0;
overflow:hidden;
height:auto;
}

구글링을 해서 overflow:hidden; height:auto;를 추가해 봤지만 여전히 같은 문제가 발생 됩니다. 다른 엘리먼트들과 충돌?이 있는지 해서 빈 html파일에서 테스트를 해보았는데 같은 결과가 나오네요.

어떻게 하면 브라우저 크기가 줄어들경우 Label이 개행되면서 라인간의 겹침이 없게 할 수 있을까요?

2 답변

  • inline의 특징때문에 그렇습니다. inline에 대하여 알아보려면 하단의 링크를 따라가세요. 우선겹치지 않도록 정리하는 방법은 두가지 방법이 있는데요. 하나는 displayinlineinline-block;으로 변경하는 것이고, 또 하나는 line-height를 조절하는 방법입니다. label이라는 class를 사용하는걸 봐서 bootstrap v3.3.7을 사용중이신것같아요. 이 버전의 css파일을 까보면 아래의 항목이 있습니다.

    .label {
      display: inline;
      padding: .2em .6em .3em;
      font-size: 75%;
      font-weight: bold;
      line-height: 1;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: .25em;
    }
    

    따라서 이 부분을 직접 수정하거나, 새로운 css파일을 덮어서 displayinline-block;으로 변경해주거나, line-height를 조절해줌으로써 겹치는 현상을 개선할 수 있습니다.

    1. display를 조절하는 방법 : 데모보기
    2. line-height를 조절하는 방법 : 데모보기

    1번과 2번의 예시에 사용한 !important는 우선해서 해당 명령어를 실행하라는 명령어 입니다. 이경우 웹에서 데모를 표현하느라 사용했습니다. 가급적 자제하는게 좋아요. 또, 주의해야할 점은 별도의 style.css 파일을 관리하시는 경우라면 반드시 html상에 bootstrap의 css파일 (ex:css/bootstrap.min.css)보다 아래에 작성해야합니다. 위에 질문자께서 .slabel에 잘 하셨는데 반영이 안된거라면 css의 우선순위가 달라서 반응을 안하는 경우일 수 있어요.

    ps

    • display속성에 대하여 더 알아보고자한다면 이곳을 따라가세요.
    • !important속성을 더 알아보고자 한다면 여기를 둘러보세요

    문제가 잘 해결되시길 :-)

  • 이 곳을 한번 참고해보세요.

    내부의 block 요소들이 한 줄로만 표현되게 하려면, flexbox 로 만들어 테스트해보세요. 적용할 경우 내부 엘리먼트의 margin/padding 이 미묘하게 바뀌니 잘 확인해야 할 것 같습니다.

    .slabel {
    display:flex;
    padding-top:0;
    padding-bottom:0;
    overflow:hidden;
    height:auto;
    }
    

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)