Baris bersarang dengan sistem kotak bootstrap?

196

Saya ingin 1 gambar lebih besar dengan 4 gambar kecil dalam format 2x2 seperti ini:

Gambar 1 Contoh

Pikiran awal saya adalah untuk menyimpan semuanya dalam satu baris. Lalu buat dua kolom, dan, di kolom kedua, buat dua baris dan dua kolom untuk membuat efek 1x1 dan 2x2.

Namun, ini sepertinya tidak mungkin, atau saya tidak melakukannya dengan benar?

css html twitter-bootstrap grid grid-system Greg
sumber
Silakan kirim HTML / CSS yang telah Anda coba sejauh ini.
Steve Sanders
Coba ini: jsfiddle.net/KXje2/9 Saya mengedit biola saya untuk mengakomodasi untuk besar melalui layar ekstra kecil.
BuddhistBeast
Apakah kode di atas berfungsi untuk Anda? ...
BuddhistBeast

Jawaban:

299

Bootstrap Versi 3.x

Seperti biasa, baca dokumentasi hebat Bootstrap:

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

Pastikan baris tingkat induk berada di dalam .containerelemen. Setiap kali Anda ingin membuat sarang, cukup buka bagian .rowdalam kolom yang baru.

Berikut tata letak sederhana untuk bekerja:

<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 Versi 4.0

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

Berikut ini adalah versi terbaru untuk 4.0, tetapi Anda harus benar-benar membaca seluruh bagian dokumen di grid sehingga Anda mengerti bagaimana memanfaatkan fitur yang kuat ini

<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>

Demo di Fiddle jsFiddle 3.x | jsFiddle 4.0

Yang akan terlihat seperti ini ( dengan sedikit penambahan gaya ):

tangkapan layar

KyleMit
sumber
1
maaf untuk membajak utas berusia 1 tahun, tetapi apakah Anda tahu cara mendapatkan 0px antara gambar dan 1 dan 3
alex
2
@alex, tentu - cukup setel margin: 0;pada .mini-boxelemen. Contoh saya baru saja menambahkan satu untuk kejelasan, tetapi Anda bisa langsung menghapus baris. Ini demo
KyleMit
4
mengapa tidak ada baris antara col untuk minibox 2 dan col untuk minibox 3? dan apa yang akan terjadi jika ada?
pashute
4
@pashute, lihat Kotak Bootstrap 3, apakah benar - benar penting berapa banyak kolom dalam satu baris? . Setiap kotak mini membutuhkan 50% dari ruang yang tersedia (dibatasi oleh kolom) sehingga dua kotak akan menempati baris pertama. Setiap tambahan akan hanya membungkus ke baris baru. Anda juga bisa memasangkan masing-masing dalam baris, tetapi Anda tidak perlu melakukannya. Bootstrap membungkus secara default sehingga Anda tidak perlu mengacaukan markup Anda dengan baris baru. Jika secara semantik bermakna, saya akan mengatakan untuk itu. Tetapi jika Anda hanya menampilkan daftar 4 objek, simpan di baris yang sama.
KyleMit
1
@ user3921890, itu topik yang terlalu besar untuk dijawab dalam baris komentar. Dapatkah Anda memposting utas baru yang menjelaskan apa yang Anda coba lakukan dan setidaknya satu upaya untuk melakukannya, dan kemudian tautkan ke sini.
KyleMit
6

Menambahkan apa yang dikatakan @KyleMit, pertimbangkan untuk menggunakan:

  • col-md-* kelas untuk kolom luar yang lebih besar
  • col-xs-* kelas untuk kolom dalam yang lebih kecil

Ini akan berguna ketika Anda melihat halaman pada ukuran layar yang berbeda.

Pada layar kecil, pembungkusan kolom luar yang lebih besar kemudian akan terjadi sambil mempertahankan kolom dalam yang lebih kecil, jika memungkinkan

Ezzadeen
sumber