부트스트랩 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에 대하여 알아보려면 하단의 링크를 따라가세요. 우선겹치지 않도록 정리하는 방법은 두가지 방법이 있는데요. 하나는display
의inline
을inline-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파일을 덮어서
display
를inline-block;
으로 변경해주거나,line-height
를 조절해줌으로써 겹치는 현상을 개선할 수 있습니다.1번과 2번의 예시에 사용한
!important
는 우선해서 해당 명령어를 실행하라는 명령어 입니다. 이경우 웹에서 데모를 표현하느라 사용했습니다. 가급적 자제하는게 좋아요. 또, 주의해야할 점은 별도의 style.css 파일을 관리하시는 경우라면 반드시 html상에 bootstrap의 css파일 (ex:css/bootstrap.min.css)보다 아래에 작성해야합니다. 위에 질문자께서.slabel
에 잘 하셨는데 반영이 안된거라면 css의 우선순위가 달라서 반응을 안하는 경우일 수 있어요.ps
문제가 잘 해결되시길 :-)
-
이 곳을 한번 참고해보세요.
내부의 block 요소들이 한 줄로만 표현되게 하려면, flexbox 로 만들어 테스트해보세요. 적용할 경우 내부 엘리먼트의 margin/padding 이 미묘하게 바뀌니 잘 확인해야 할 것 같습니다.
.slabel { display:flex; padding-top:0; padding-bottom:0; overflow:hidden; height:auto; }
댓글 입력