แถวซ้อนกันกับระบบกริด bootstrap?

ฉันต้องการ 1 ภาพขนาดใหญ่ขึ้นด้วย 4 ภาพขนาดเล็กในรูปแบบ 2x2 เช่นนี้:

ความคิดแรกของฉันคือการบ้านทุกอย่างในแถวเดียว จากนั้นสร้างสองคอลัมน์และในคอลัมน์ที่สองให้สร้างสองแถวและสองคอลัมน์เพื่อสร้างเอฟเฟกต์ 1x1 และ 2x2

อย่างไรก็ตามดูเหมือนจะเป็นไปไม่ได้หรือฉันแค่ทำไม่ถูกต้อง?

Bootstrap เวอร์ชัน 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>

Bootstrap เวอร์ชัน 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>

การสาธิตใน Fiddle jsFiddle 3.x | jsFiddle 4.0

ซึ่งจะมีลักษณะเช่นนี้ ( พร้อมการเพิ่มสไตล์เล็กน้อย ):

การเพิ่มสิ่งที่ @KyleMit พูดไว้พิจารณาใช้:

• col-md-* คลาสสำหรับคอลัมน์ภายนอกที่ใหญ่กว่า
• col-xs-* คลาสสำหรับคอลัมน์ภายในที่เล็กกว่า

สิ่งนี้จะมีประโยชน์เมื่อคุณดูหน้าเว็บด้วยขนาดหน้าจอที่แตกต่างกัน

บนหน้าจอขนาดเล็กการตัดคอลัมน์ด้านนอกที่มีขนาดใหญ่กว่าจะเกิดขึ้นในขณะที่ยังคงรักษาคอลัมน์ภายในที่เล็กกว่าหากเป็นไปได้