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

196

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

그림 1 예

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

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

— 그렉
소스

지금까지 시도한 HTML / CSS를 게시하십시오.

— 스티브 샌더스

이것을 시도하십시오 : jsfiddle.net/KXje2/9 큰 화면을 통해 큰 화면을 수용 할 수 있도록 바이올린을 편집했습니다.

— 불교

위의 코드가 당신을 위해 작동 했습니까? ...

— BuddhistBeast

299

부트 스트랩 버전 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

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

스크린 샷

— 카일 미트
소스

1 년산 스레드를 납치해서 죄송하지만 이미지와 1과 3 사이에서 0px를 얻는 방법을 알고 계십니까

— alex

@ 알렉스, 확인 - 단지 설정 margin: 0;상의 .mini-box요소입니다. 내 예제는 명확성을 위해 하나를 추가하는 것이지만 행을 완전히 제거 할 수 있습니다. 여기 데모가 있습니다

— KyleMit

minibox 2의 col과 minibox 3의 col 사이에 행이없는 이유는 무엇입니까? 있다면 어떻게 될까요?

— pashute

@pashute 참조 가 않습니다, 부트 스트랩 3 그리드를 정말 행에 얼마나 많은 열 문제? . 각 미니 박스는 사용 가능한 공간의 50 %를 차지하므로 (열로 제한됨) 두 개는 첫 번째 행을 차지합니다. 추가 항목은 새로운 줄로 줄 바꿈됩니다. 당신은 할 수 있습니다 또한 행에 그들 각각의 쌍,하지만 당신은 할 필요가 없습니다. 부트 스트랩은 기본적으로 줄 바꿈되므로 마크 업을 새 행으로 어지럽 힐 필요가 없습니다. 의미 적으로 의미가 있다면 나는 그것을 갈 것이라고 말하고 싶습니다. 그러나 4 개의 객체 목록 만 표시하는 경우 동일한 행에 유지하십시오.

— KyleMit

@ user3921890, 그것은 주석 행에 대답하기에는 너무 큰 주제입니다. 당신이하려는 일과 그것을 시도하는 적어도 하나의 시도를 설명하는 새로운 스레드를 게시 할 수 있습니까?

— KyleMit

@KyleMit이 말한 것에 추가하여 다음을 사용하는 것이 좋습니다.

col-md-* 더 큰 외부 열에 대한 클래스
col-xs-* 더 작은 내부 열에 대한 클래스

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

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

— 에 자딘
소스