저는 Bootstrap 유틸리티 클래스 "mb-n15"를 사용하여 이미지에 음수 여백을 추가하여 컨테이너 아래로 떨어지도록합니다.
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-12 col-md-5 col-lg-5 order-md-1">
<div class="w-md-150 w-lg-130 position-relative">
<!-- Image -->
<div class="mb-n15">
<!-- Image -->
<img src="myimage.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
데스크톱에서 멋지게 보입니다. 그러나 모바일에서는 이미지 아래의 일부 텍스트와 겹치므로 읽을 수 없습니다.
"col-md-5"또는 "col-lg-5"(col-12가 아닌 그 이상) 크기에서만 "mb-n15"클래스를 트리거하려면 어떻게해야합니까? 아이디어는 CSS 미디어 쿼리를 수동으로 작성할 필요없이 "Bootstrap Way"를 사용하여 "mb-n15"클래스를 실행하는 것입니다. 가능합니까?
mb-n15수업 이 없습니다 . 있다 부정적인 여백 클래스는 0 - 응답하여 설정할 수 있습니다 5 개 단위.
예를 들어, 여백을 음수 5 간격 단위 이상으로 설정 md하고 xs / sm (모바일)에 음수 여백을 설정하지 않으려면 다음과 같습니다.
<div class="m-md-n5 m-0">
<img src="//placehold.it/800x500" class="img-fluid">
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다