부트 스트랩 그리드 시스템이있는 중첩 된 행? 한 줄에 수용하는 것이었다. 그런 다음 두

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

그림 1 예

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

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

답변

부트 스트랩 버전 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-* 더 작은 내부 열에 대한 클래스

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

작은 화면에서 가능하면 더 작은 내부 컬럼을 유지하면서 더 큰 외부 컬럼 랩핑이 발생합니다.

답변