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