부트스트랩 그리드 시스템이 포함된 중첩 행?

부트스트랩 그리드 시스템이 포함된 중첩 행?

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

처음에 생각한 것은 모든 것을 한 줄로 묶는 것이었습니다.그런 다음 두 개의 열을 만들고 두 번째 열에 행 두 개와 열 두 개를 만들어 1x1 및 2x2 효과를 만듭니다.

하지만, 이것은 가능하지 않은 것처럼 보입니다, 아니면 제가 제대로 하고 있지 않은 것입니까?

부트스트랩 버전 3.x

항상 그렇듯이 부트스트랩의 훌륭한 설명서를 읽어 보십시오.

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

상위 수준 행이 다음 내부에 있는지 확인합니다..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/ #docs

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