Arti angka dalam "col-md-4", "col-xs-1", "col-lg-2" di Bootstrap

440

Saya bingung dengan sistem grid di Bootstrap baru, khususnya kelas-kelas ini:

col-lg-*
col-md-*
col-xs-*

(di mana * mewakili beberapa nomor).

Adakah yang bisa menjelaskan hal berikut:

  1. Bagaimana angka itu menyelaraskan grid?
  2. Bagaimana cara menggunakan angka-angka ini?
  3. Apa yang sebenarnya mereka wakili?
Bravo
sumber
13
Anda akan menemukan penjelasan di sini . Anda dapat menggunakan angka dalam kolom sesuka Anda, tetapi pastikan bahwa jumlah semua angka kolom dalam baris yang sama harus sama dengan 12
Doan Cuong

Jawaban:

835

Berlaku untuk Bootstrap 3 saja.

Mengabaikan huruf (x s , sm , md , lg ) untuk saat ini , saya akan mulai dengan angka saja ...

  • angka-angka (1-12) mewakili sebagian dari total lebar div apa pun
  • semua div dibagi menjadi 12 kolom
  • jadi, col-*-6bentang 6 dari 12 kolom (setengah lebar), col-*-12bentang 12 dari 12 kolom (seluruh lebar), dll

Jadi, jika Anda ingin dua kolom sama untuk span div, tulis

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

Atau, jika Anda ingin tiga kolom yang tidak sama membentang dengan lebar yang sama, Anda bisa menulis:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

Anda akan melihat # kolom selalu berjumlah hingga 12. Ini bisa kurang dari dua belas, tetapi berhati-hatilah jika lebih dari 12, karena div yang menyinggung Anda akan turun ke baris berikutnya (bukan .row, yang merupakan cerita lain sekaligus).

Anda juga bisa membuat kolom di dalam kolom , (terbaik dengan .rowpembungkus di sekitarnya) seperti:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

Setiap set div bersarang juga menjangkau hingga 12 kolom div induknya. CATATAN: Karena setiap .colkelas memiliki bantalan 15px di kedua sisi, Anda biasanya harus membungkus kolom bersarang di dalam .row, yang memiliki margin -15px. Ini menghindari duplikasi padding dan menjaga konten tetap berjajar antara kelas col bersarang dan tidak bersarang.

- Anda tidak secara khusus bertanya tentang xs, sm, md, lgpenggunaannya, tetapi mereka berjalan beriringan sehingga saya tidak bisa tidak menyentuhnya ...

Singkatnya, mereka digunakan untuk menentukan ukuran layar mana yang harus diterapkan oleh kelas:

  • xs = layar ekstra kecil (ponsel)
  • sm = layar kecil (tablet)
  • md = layar sedang (beberapa desktop)
  • lg = layar besar (desktop yang tersisa)

Membaca " Grid Options " bab dari dokumentasi Bootstrap resmi untuk lebih jelasnya.

Anda biasanya harus mengklasifikasikan div menggunakan beberapa kelas kolom sehingga berperilaku berbeda tergantung pada ukuran layar (ini adalah jantung dari apa yang membuat bootstrap responsif). misalnya: div dengan kelas col-xs-6dan col-sm-4akan menjangkau setengah layar pada ponsel (xs) dan 1/3 layar pada tablet (sm).

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

CATATAN: sesuai komentar di bawah ini, kelas kisi untuk ukuran layar yang diberikan berlaku untuk ukuran layar itu dan lebih besar kecuali pernyataan lain menimpanya (yaitu col-xs-6 col-md-4membentang 6 kolom pada xs dansm , dan 4 kolom pada md danlg , meskipun smdan lgtidak pernah secara eksplisit dinyatakan)

CATATAN: jika Anda tidak menetapkan xs, defaultnya adalah col-xs-12(yaitu col-sm-6setengah lebar aktif sm, mddan lglayar, tetapi lebar penuh pada xslayar).

CATATAN: Ini benar-benar baik-baik saja jika Anda .rowmemasukkan lebih dari 12 cols, selama Anda mengetahui bagaimana mereka akan bereaksi. --Ini adalah masalah yang diperdebatkan, dan tidak semua orang setuju.

Shawn Taylor
sumber
38
Perlu juga dicatat bahwa kelas kisi untuk ukuran layar yang diberikan berlaku untuk layar yang ukurannya lebih besar , kecuali diganti lebih lanjut. Misalnya, .col-xs-2.col-sm-2.col-lg-7setara dengan. col-xs-2.col-lg-7
cvrebert
5
Anda perlu membuat koreksi pada contoh Anda tentang bersarang. Bersarang membutuhkan baris untuk dimasukkan ke dalam kolom yang Anda bersarang kolom lainnya di dalam. Tidak menambahkan baris akan menyebabkan Anda memiliki bantalan ganda. Untuk pemahaman yang lebih baik tentang ini, lihat diagram dalam jawaban saya di sini: stackoverflow.com/questions/23899715/…
jme11
1
Penjelasan yang sangat bagus, terima kasih. Saya suka sedikit tentang membungkus .colsdi .rowuntuk menghindari dan cacel padding. Saya selalu bertanya-tanya mengapa harus menggunakan baris dan apa bedanya.
Rishiraj Purohit
Tetapi dalam dokumentasi tampaknya total lebar div melebihi 12, hingga 18 untuk 'xs'. Silakan lihat bagian 'Campuran: seluler dan desktop' dan mengapa demikian? getbootstrap.com/docs/3.3/examples/grid
Michel
@Michel sepertinya Anda salah mengerti dokumentasi mereka. mereka menunjukkan dua opsi xs yang terpisah di sana - satu untuk 12 kolom (lebar penuh) dan satu untuk 6 kolom (setengah lebar). Anda akan melihat bahwa kolom-kolom itu juga menunjukkan lg-8 dan lg-4 - apa yang mereka tunjukkan adalah bahwa mereka akan merentang 8 dan 4 kolom (2/3 + 1/3 dari total lebar lebar) pada layar besar, dan 12 dan 6 (lebar penuh + 1/2 dari baris berikut) pada layar ponsel. berharap itu bisa membantu!
Shawn Taylor
47

Sistem grid Bootstrap memiliki empat kelas:
xs (untuk ponsel)
sm (untuk tablet)
md (untuk desktop)
lg (untuk desktop yang lebih besar)

Kelas-kelas di atas dapat dikombinasikan untuk membuat tata letak yang lebih dinamis dan fleksibel.

Kiat: Setiap kelas ditingkatkan, jadi jika Anda ingin mengatur lebar yang sama untuk xs dan sm, Anda hanya perlu menentukan xs.

OK, jawabannya mudah, tetapi baca terus:

col-lg- singkatan kolom besar ≥ 1200px
col-md- singkatan media kolom ≥ 992px
col-xs- singkatan kolom ekstra kecil≥ 768px

Angka-angka piksel adalah titik istirahat, jadi misalnya col-xsmenargetkan elemen ketika jendela lebih kecil dari 768px (kemungkinan perangkat seluler) ...

Saya juga membuat gambar di bawah ini untuk menunjukkan bagaimana sistem grid bekerja, dalam contoh ini saya menggunakannya dengan 3, ingin col-lg-6menunjukkan kepada Anda bagaimana sistem grid bekerja di halaman, lihat caranya lg, mddan xsresponsif terhadap ukuran jendela:

Sistem grid Bootstrap, col - * - 6

Alireza
sumber
1
col-xs-*telah dijatuhkan di Bootstrap 4 yang mendukungcol-*
Zohab Ali
Maukah Anda membagikan HTML (dan kemungkinan CSS)? Terima kasih.
NoChance
11

Poin utamanya adalah ini:

col-lg-* col-md-* col-xs-* col-sm tentukan berapa banyak kolom dalam ukuran layar yang berbeda ini.

Contoh: jika Anda ingin ada dua kolom di layar desktop dan di layar ponsel Anda menempatkan dua col-md-6dan dua col-xs-6kelas di kolom Anda.

Jika Anda ingin ada dua kolom di layar desktop dan hanya satu kolom di layar ponsel (yaitu dua baris ditumpuk di atas satu sama lain) Anda meletakkan two col-md-6dan dua col-xs-12di kolom Anda dan karena jumlah akan 24 mereka akan secara otomatis menumpuk di atas masing-masing lainnya, atau tinggalkan xsgaya saja.

Nada Soda
sumber
6

Ini dia

col-lg-2: jika layar besar ( lg ) maka komponen ini akan memakan waktu 2 elemen mengingat seluruh baris dapat memuat 12 elemen (sehingga Anda akan melihat bahwa pada layar besar komponen ini membutuhkan ruang 16% berturut-turut)

col-lg-6: jika layarnya besar ( lg ) maka komponen ini akan memakan waktu 6 elemen mengingat seluruh baris dapat memuat 12 elemen - ketika diterapkan Anda akan melihat bahwa komponen tersebut telah mengambil setengah ruang yang tersedia di baris.

Aturan di atas hanya diterapkan ketika layarnya besar. ketika layarnya kecil aturan ini dibuang dan hanya satu komponen per baris yang ditampilkan.

Gambar di bawah ini menunjukkan berbagai lebar ukuran layar:

definisi ukuran layar

Dhananjay
sumber