Bootstrap의 그리드 시스템 인 화면 폭 이상으로 col을 숨기기
목적
Bootstrap의 반응형 디자인에 대응한 그릿 시스템의 기재 방법을 응용하여, 어느 화면 폭 이상이 되면 해당 div를 숨기는 방법을 정리한다.
※그릿 시스템의 기본을 알고 싶은 분은 여기 를 참고해 주세요.
※응답 디자인의 기본을 알고 싶은 분은 여기 를 참고해 주세요.
누르는 포인트
d-none 로 한다.※ d는 display의 약자 같다
class="col-12 d-md-none"
그리드 시스템을 작성하는 방법의 예
화면폭이 Medium(md) 이상일 때 모든 화면폭에서 12분할된 안의 8영역과 4영역을 사용하여 텍스트를 표시하고 있던 것과 8영역의 "안녕"만 표시한다.
<div class="container">
<div class="row">
<div class="col-8">
<h1>おはよう</h1>
</div>
<div class="col-4 d-md-none">
<h1>こんにちは</h1>
</div>
</div>
</div>
↓ 미리보기
Reference
이 문제에 관하여(Bootstrap의 그리드 시스템 인 화면 폭 이상으로 col을 숨기기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/miriwo/items/0a3466250e0587d4b47c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
