Saya ingin memiliki 5 kolom yang sama pada halaman yang saya buat dan sepertinya saya tidak mengerti bagaimana grid 5 kolom digunakan di sini: http://web.archive.org/web/20120416024539/http://domain7 .com / mobile / tools / bootstrap / responsif
Apakah kisi lima kolom diperagakan di atas bagian dari kerangka bootstrap twitter?
Jawaban:
Gunakan lima divs dengan kelas span2 dan berikan yang pertama kelas offset1.
Voila! Lima kolom dengan jarak dan tengah yang sama.
Di bootstrap 3.0, kode ini akan terlihat seperti
sumber
Untuk Bootstrap 3 ke atas
Tata letak 5 kolom lebar penuh fantastis dengan Twitter Bootstrap dibuat di sini .
Sejauh ini, ini adalah solusi yang paling canggih karena ia bekerja dengan mulus dengan Bootstrap 3. Ini memungkinkan Anda untuk menggunakan kembali kelas berulang-ulang, berpasangan dengan kelas Bootstrap saat ini untuk desain responsif.
CSS:
Tambahkan ini ke stylesheet global Anda, atau bahkan ke bagian bawah
bootstrap.css
dokumen Anda .Gunakan untuk menggunakannya!
Misalnya, jika Anda ingin membuat elemen div yang berperilaku seperti tata letak lima kolom pada layar sedang dan seperti dua kolom pada yang lebih kecil, Anda hanya perlu menggunakan sesuatu seperti ini:
DEMO KERJA - Perluas bingkai untuk melihat kolom menjadi responsif.
DEMO LAIN - Memasukkan
col-*-5ths
kelas-kelasbarudengan orang lain seperticol-*-3
dancol-*-2
. Ubah ukuran frame untuk melihat semuanya berubah menjadicol-xs-6
dalam tampilan responsif.Untuk Bootstrap 4
Bootstrap 4 sekarang menggunakan flexbox secara default, sehingga Anda mendapatkan akses ke kekuatan magisnya langsung dari kotak. Lihat kolom tata letak otomatis yang secara dinamis menyesuaikan lebar tergantung pada berapa banyak kolom yang bersarang.
Ini sebuah contoh:
DEMO KERJA
sumber
col-*-15
mungkin membingungkan. Tampaknya menyiratkan bahwa mereka adalah bagian dari sistem grid 15-kolom, padahal bukan.col-*-15
tidak masalah dengan saya, tetapicol-*-5ths
mungkin nama kolom yang sedikit membingungkan. Itulah yang saya gunakan agar pengembang saya yang lain tidak merasa bingung.position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;
. Pada dasarnya, kode yang saya posting hanya memperluas ini sehingga mereka cocok dengan styling bawaan Bootstrap. Saya kemudian menerapkan lebar20%
sehingga 5 kolom yang sama dapat masuk di seluruh halaman. Sangat sederhana :)Untuk Bootstrap 3 , jika Anda ingin penuh-lebar dan menggunakan
LESS
,SASS
atau sesuatu yang mirip, yang harus Anda lakukan adalah membuat penggunaan fungsi mixin Bootstrap inimake-md-column
,make-sm-column
, dllKURANG:
KELANCANGAN:
Anda tidak hanya dapat membangun kelas kolom benar-lebar penuh bootstrap menggunakan mixin ini, tetapi Anda juga dapat membangun semua kelas pembantu terkait seperti
.col-md-push-*
,.col-md-pull-*
, dan.col-md-offset-*
:KURANG:
KELANCANGAN:
Jawaban lain berbicara tentang pengaturan
@gridColumns
yang benar-benar valid, tetapi itu mengubah lebar kolom inti untuk semua bootstrap. Menggunakan fungsi mixin di atas akan menambahkan tata letak 5 kolom di atas kolom bootstrap default, sehingga tidak akan merusak alat pihak ke-3 atau gaya yang ada.sumber
2.4
5 dari 12 (2.4*5=12
), berfungsi untuk Bootstrap 3 dalam kisi 12 kolom. Juga berlaku untukmake-xs
,,make-sm
tetapi itu tidak akan berhasil dikombinasikan dengan definisi standar col lainnya (prioritas dapatkan terbaru)offset
,pull
danpush
) berdasarkan ini untuk saya gunakan sendiri. Jangan ragu untuk memeriksanyaPerbarui 2019
Bootstrap 4.1+
Berikut adalah 5 kolom lebar penuh yang sama ( tidak ada CSS atau SASS tambahan ) menggunakan kisi tata letak otomatis :
http://www.codeply.com/go/MJTglTsq9h
Solusi ini berfungsi karena Bootstrap 4 sekarang flexbox. Anda bisa mendapatkan 5 kolom untuk dibungkus dengan yang sama
.row
menggunakan jeda seperti<div class="col-12"></div>
atau<div class="w-100"></div>
setiap 5 kolom.Lihat juga: Bootstrap - 5 layout kolom
sumber
flex-nowrap
untuk menambah.row
karena kolom (otomatis) dapat melebihi lebar induk.Di bawah ini adalah kombinasi jawaban @machineaddict dan @Mafnah, ditulis ulang untuk Bootstrap 3 (sejauh ini berfungsi dengan baik untuk saya):
sumber
Pertahankan bootstrap asli dengan 12 kolom, jangan sesuaikan itu. Satu-satunya modifikasi yang perlu Anda lakukan adalah beberapa css setelah css responsif bootstrap asli, seperti ini:
Kode berikut telah diuji untuk Bootstrap 2.3.2:
Dan html:
Catatan: Meskipun rentang2 kali 5 tidak sama dengan 12 kolom, Anda mendapatkan idenya :)
Contoh kerja dapat ditemukan di sini http://jsfiddle.net/v3Uy5/6/
sumber
Jika Anda tidak membutuhkan lebar kolom yang sama persis, Anda dapat mencoba membuat 5 kolom menggunakan nesting:
jsfiddle
Dua kolom pertama akan memiliki lebar sama dengan 5/12 * 1/2 ~ 20.83%
Tiga kolom terakhir: 7/12 * 1/3 ~ 19,44%
Peretasan seperti itu memberikan hasil yang dapat diterima dalam banyak kasus dan tidak memerlukan perubahan CSS apa pun (kami hanya menggunakan kelas bootstrap asli).
sumber
Buat unduhan Bootstrap khusus untuk tata letak 5 kolom
Pergi ke halaman kustomisasi Bootstrap 2.3.2 (atau Bootstrap 3 ) dan atur variabel berikut (jangan masukkan titik koma):
Unduh bangunan Anda. Kisi ini akan masuk ke dalam wadah default, menjaga lebar selokan standar (hampir).
Catatan: Jika Anda menggunakan KURANG, perbarui
variables.less
saja.sumber
Dengan flexbox http://output.jsbin.com/juziwu
sumber
Saya memilih jawaban Mafnah tetapi melihat ini lagi saya sarankan berikut ini lebih baik jika Anda menjaga margin default dll.
sumber
sumber
Buat 5 elemen dengan kelas col-sm-2 dan tambahkan ke elemen pertama juga kelas col-sm-offset-1
Mm ini tidak akan menjadi lebar penuh (itu akan sedikit indentasi dari kanan dan kiri layar)
Kode akan terlihat seperti ini
sumber
Bootstrap 4, jumlah variabel kolom per baris
Jika Anda ingin memiliki hingga lima kolom per baris, sehingga lebih sedikit jumlah kolom masih hanya mengambil 1 / 5th dari baris masing-masing, solusinya adalah dengan menggunakan Bootstrap 4 ini mixin :
SCSS:
HTML:
sumber
Cara lain untuk mengaktifkan 5 kolom di Bootstrap 3 adalah mengubah format 12 kolom yang digunakan secara default oleh Bootstrap. Dan kemudian buat kisi 20 kolom (gunakan kustomisasi di situs web Bootstrap ATAU gunakan versi KURANG / SASS).
Untuk menyesuaikan pada situs web bootstrap, buka halaman Customize and Download , perbarui variabel
@grid-columns
dari12
ke20
. Maka Anda akan dapat membuat 4 serta 5 kolom.sumber
Ini bisa dilakukan dengan bersarang dan menggunakan sedikit css over-ride.
Lalu beberapa css
}
Berikut ini sebuah contoh: 5 contoh kolom yang sama
Dan inilah tulisan lengkap saya di coderwall
Lima kolom yang sama di bootstrap 3
sumber
Menurut pendapat saya lebih baik menggunakannya seperti ini dengan sintaks Kurang. Jawaban ini didasarkan pada jawaban dari @fizzix
Dengan cara ini kolom menggunakan variabel (@ lebar saluran-selokan, breakpoint media) yang mungkin ditimpa pengguna dan perilaku lima kolom cocok dengan perilaku 12 kolom kotak.
sumber
Ini luar biasa: http://www.ianmccullough.net/5-column-bootstrap-layout/
Kerjakan saja:
Dan CSS:
sumber
Secara default, Bootstrap tidak menyediakan sistem kisi yang memungkinkan kami membuat tata letak lima kolom, Anda harus membuat definisi kolom default seperti cara Bootstrap membuat beberapa kelas khusus dan kueri media dalam file css Anda
dan beberapa kode html
sumber
Bootstrap secara default dapat menskala hingga 12 kolom? Ini berarti jika kita ingin membuat tata letak 12 kolom dengan lebar yang sama, kita akan menulis di dalam div class = "col-md-1" dua belas kali.
sumber
Tata letak 5 kolom dengan gaya Twitter Bootstrap
sumber
Sebuah solusi yang tidak memerlukan banyak CSS, atau mengubah pengaturan bootstrap 12col default:
http://jsfiddle.net/0ufdyeur/1/
HTML:
CSS:
sumber
Cukup buat kelas baru dan tentukan perilakunya per setiap permintaan media sesuai kebutuhan
di sini adalah demo yang berfungsi https://codepen.io/giorgosk/pen/BRVorW
sumber
Di bootstrap 3, saya pikir kita bisa melakukan sesuatu seperti itu, untuk menghapus margin kiri dan kanan:
dan CSS
sumber
Bagaimana Anda dapat menambahkan kisi 5 kolom di bootstrap
sumber
solusi termudah tanpa perlu mengedit CSS adalah:
Dan jika Anda membutuhkannya untuk menembus melampaui breakpoint, buat saja blok btn-grup. Semoga ini bisa membantu seseorang.
sumber
Lima kolom jelas bukan bagian dari desain bootstrap.
Tetapi dengan Bootstrap v4 (alpha), ada 2 hal untuk membantu dengan tata letak kotak yang rumit
Secara sederhana, saya menggunakan
Baik itu 5,7,9,11,13 atau sesuatu yang aneh, itu akan baik-baik saja. Saya cukup yakin bahwa standar 12-grid mampu melayani lebih dari 90% kasus penggunaan - jadi mari kita desain seperti itu - berkembang lebih mudah juga!
Tutorial fleksibel yang bagus ada di sini " https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "
sumber
Saya telah membuat definisi mixin SASS berdasarkan pada definisi bootstrap untuk sejumlah kolom (secara pribadi di samping 12 saya menggunakan 8, 10 dan 24):
Dan Anda cukup membuat kelas dengan:
Saya harap seseorang akan merasakan manfaatnya
sumber
Apakah seseorang menggunakan bootstrap-sass (v3), berikut adalah kode sederhana untuk 5 kolom menggunakan campuran bootstrap:
Pastikan Anda telah memasukkan:
sumber
Untuk Bootstrap 4.4+
Gunakan
row-cols-n
kelas baru .row-cols-5
kelas ke.row
div Anda . Tidak perlu CSS khusus.Untuk versi Bootstrap 4 sebelum Bootstrap 4.4
Salin CSS di bawah ini (CSS luar biasa dari penulis Bootstrap) dan tambahkan ke proyek Anda
Baca dokumen yang dikutip di atas untuk menggunakannya dengan benar.
.row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}
sumber
sumber