Bootstrap의 그리드 시스템 인 화면 폭 이상으로 col을 표시합니다.
목적
Bootstrap의 반응형 디자인에 대응한 그릿 시스템의 기재 방법을 응용하여, 어느 화면 폭 이상이 되면 해당 div를 표시하는 방법을 정리한다.
※그릿 시스템의 기본을 알고 싶은 분은 여기 를 참고해 주세요.
※응답 디자인의 기본을 알고 싶은 분은 여기 를 참고해 주세요.
누르는 포인트
class="d-none col-md-12"
그리드 시스템을 작성하는 방법의 예
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>おはよう</h1>
</div>
<div class="d-none col-md-4">
<h1>こんにちは</h1>
</div>
</div>
</div>
↓ 미리보기


<div class="container">
<div class="row">
<div class="d-none col-lg-1">
<h1>おはよう</h1>
</div>
<div class="d-none col-lg-1">
<h1>こんにちは</h1>
</div>
<div class="d-none col-lg-10">
<h1>こんばんは</h1>
</div>
</div>
</div>
↓ 미리보기


Reference
이 문제에 관하여(Bootstrap의 그리드 시스템 인 화면 폭 이상으로 col을 표시합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/miriwo/items/843e2cc6212881131fd2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)