편집 기록

편집 기록
  • 프로필 박기선님의 편집
    날짜2016.08.17

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


    부트스트랩 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이 개행되면서 라인간의 겹침이 없게 할 수 있을까요?

  • 프로필 알 수 없는 사용자님의 편집
    날짜2016.08.17

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


    부트스트랩 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이 개행되면서 라인간의 겹침이 없게 할 수 있을까요?