부트스트랩 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 / visual design
  • 2016년 08월 17일에 작성됨

조회수 224


2 답변


좋아요
1
싫어요
채택취소하기

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속성을 더 알아보고자 한다면 여기를 둘러보세요

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

  • 2016년 08월 17일에 작성됨
    Css / visual design

  • 감사합니다. 단박에 해결했습니다 ^^    Jinwithyoo   2016.8.17 23:18     

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

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

.slabel {
display:flex;
padding-top:0;
padding-bottom:0;
overflow:hidden;
height:auto;
}
  • 2016년 08월 17일에 작성됨
    리눅스(유닉스) 기반의 시스템에서 웹 서비스를 개발하고 있습니다.

  • 테스트해보니 flexbox 아주 좋네요 ! ㅎㅎ    Jinwithyoo   2016.8.17 23:19     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close