부트 스트랩 그리드 시스템이있는 중첩 된 행?

부트 스트랩 그리드 시스템이있는 중첩 된 행?

---

다음과 같이 2x2 형식의 4 개의 작은 이미지가있는 1 개의 큰 이미지를 원합니다.

나의 초기 생각은 모든 것을 한 줄에 수용하는 것이었다. 그런 다음 두 개의 열을 만들고 두 번째 열에서 두 개의 행과 두 개의 열을 만들어 1x1 및 2x2 효과를 만듭니다.

그러나 이것은 가능하지 않은 것 같습니다. 아니면 제대로하고 있지 않습니까?

---

부트 스트랩 버전 3.x

언제나 그렇듯이 Bootstrap의 훌륭한 문서를 읽으십시오.

3.x 문서 : https://getbootstrap.com/docs/3.3/css/#grid-nesting

부모 레벨 행이 .container요소 내부에 있는지 확인하십시오 . 행을 중첩하고 싶을 때마다 .row열 내부를 새로 엽니 다 .

간단한 레이아웃은 다음과 같습니다.

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

부트 스트랩 버전 4.0

4.0 문서 : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

다음은 4.0 용으로 업데이트 된 버전이지만이 강력한 기능을 활용하는 방법을 이해하려면 표의 전체 문서 섹션을 실제로 읽어야합니다.

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

바이올린 데모 jsFiddle 3.x | jsFiddle 4.0

다음과 같이 보일 것입니다 ( 조금 추가 된 스타일링 ).

---

@KyleMit이 말한 것에 추가 :

• col-md-*더 큰 클래스를 사용하는 것을 고려하십시오
• col-xs-*더 작은 외부 열과 클래스
• 내부 칼럼

다른 화면 크기에서 페이지를 볼 때 유용합니다. 작은 화면에서 사용 :

• 더 큰 포장
• 작은 열을 유지하면서 외부 열이 발생합니다.
• 가능한 경우 내부 열

참고 URL : https://stackoverflow.com/questions/24659471/nested-rows-with-bootstrap-grid-system