목적

Bootstrap의 반응형 디자인에 대응한 그릿 시스템의 기재 방법을 응용하여, 어느 화면 폭 이상이 되면 해당 div를 표시하는 방법을 정리한다.
※그릿 시스템의 기본을 알고 싶은 분은 여기 를 참고해 주세요.
※응답 디자인의 기본을 알고 싶은 분은 여기 를 참고해 주세요.

누르는 포인트

col로 지정할 때 해당 요소를 표시하지 않는 d-none을 지정하여 정상 상태에서 요소의 내용을 표시하지 않는 상태를 만든다.

표시하고 싶은 화면 폭의 타이밍과 표시 영역을 지정해 요소를 표시시킨다.

어느 화면 이상에서 요소를 표시하고 싶을 때의 철칙 "항상 숨기기 설정으로 해두고 표시하고 싶은 화면 폭을 설정하여 표시시킨다".

d-none으로 숨기기

비표시의 요소를 Medium(md)의 화면폭으로부터 해당 요소를 12 영역을 사용해 표시하고 싶을 때의 클래스명은 아래와 같다
class="d-none col-md-12"

col이나 d를 사용하여 표시 영역을 지정할 때 화면 폭을 지정하지 않으면 모든 화면 폭으로 지정된 영역을 사용하여 표시하는 설정이 된다.

그리드 시스템을 작성하는 방법의 예

화면폭이 Medium(md) 이하일 때는 12분할된 안의 8영역을 사용한 「안녕」만 표시하고, Medium(md) 이상일 때 12분할된 안의 8영역과 4 영역을 사용하여 텍스트를 표시합니다.

아래에 HTML 파일의 내용을 기재한다.

<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>

↓ 미리보기

화면폭이 Large(lg) 이하일 때에는 아무것도 표시하지 않고, Large(lg) 이상일 때 12분할된 안의 1영역과 1영역과 10영역을 사용하여 텍스트를 표시한다.

아래에 HTML 파일의 내용을 기재한다

<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>

↓ 미리보기