Lima kolom sama di bootstrap twitter

361

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?

Gandalf
sumber
Anda sedang melihat versi bootstrap yang sangat lama. Apakah Anda ingin memiliki kisi "responsif" 5 kolom pada bootstrap (terbaru, saya harap)?
Andres Ilich
3
Saya baru menyadari bahwa. Yang dinyatakan adalah v1.3.0 dan saat ini adalah 2.0.2. Versi terbaru adalah kisi 12-kolom yang berarti saya dapat memiliki 2,3,4 dan 6 kolom yang sama. Apa yang saya tanyakan adalah, jika itu mungkin untuk memiliki 5 kolom yang sama tanpa harus mengubah banyak hal.
Gandalf
Anda bisa, ya, tetapi akan membutuhkan modifikasi berat untuk beberapa elemen grid dan juga elemen grid responsif. Apakah situs Anda responsif sama sekali? Akan sedikit lebih mudah untuk menghasilkan jawaban seperti itu, jika tidak maka akan banyak kode.
Andres Ilich
Ya, situs ini responsif tetapi saya harus memodifikasi elemen grid juga bukan bagian yang responsif saja.
Gandalf
1
Saya mengalami beberapa * sukses dengan .container.one-5th.column {width: 17%; } meskipun saya mengharapkan sesuatu yang menakjubkan untuk mengambil napas saya.17.87847% juga.
Gandalf

Jawaban:

407

Gunakan lima divs dengan kelas span2 dan berikan yang pertama kelas offset1.

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

Voila! Lima kolom dengan jarak dan tengah yang sama.


Di bootstrap 3.0, kode ini akan terlihat seperti

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>
jkofron.e
sumber
44
itu tidak berjalan dengan lebar penuh. itu bagus
machineaddict
45
Solusi yang saya posting sepenuhnya lebar dan menciptakan 5 kolom yang sama: DI SINI ADALAH JAWABANNYA .
Fizzix
5
Tidak melebar seperti yang disediakan oleh @fizzix di bawah. Membuat margin yang tidak diinginkan di kedua sisi, seperti begitu - jsfiddle.net/wdo8L1ww
Fizzix
3
kolom terlihat agak kecil dengan solusi ini, jadi saya lebih suka solusi
@fizzix
2
Bootstrap 4 5 cols (lebar penuh) tidak memerlukan CSS atau SASS: stackoverflow.com/a/42226652/171456
Zim
526

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.cssdokumen Anda .

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

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:

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

DEMO KERJA - Perluas bingkai untuk melihat kolom menjadi responsif.

DEMO LAIN - Memasukkancol-*-5thskelas-kelasbarudengan orang lain seperticol-*-3dancol-*-2. Ubah ukuran frame untuk melihat semuanya berubah menjadicol-xs-6dalam 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:

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

DEMO KERJA

Fizzix
sumber
1
Memanggil mereka col-*-15mungkin membingungkan. Tampaknya menyiratkan bahwa mereka adalah bagian dari sistem grid 15-kolom, padahal bukan.
Paul D. Waite
2
@ PaulD.Waite - Saya menambahkan sedikit catatan pada jawaban saya untuk memberi tahu orang-orang.
Fizzix
2
col-*-15tidak masalah dengan saya, tetapi col-*-5thsmungkin nama kolom yang sedikit membingungkan. Itulah yang saya gunakan agar pengembang saya yang lain tidak merasa bingung.
Mordred
3
Hey @scragar - Jika Anda melihat styling untuk semua kelas kolom Bootstrap saat ini, Anda akan melihat bahwa semuanya berisi 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 lebar 20%sehingga 5 kolom yang sama dapat masuk di seluruh halaman. Sangat sederhana :)
Fizzix
1
bagaimana dengan penamaan untuk kolom 2/5? Atau kita harus menggunakan: col-md-1ths untuk 1/5 dan col-md-2ths untuk 2/5, col-md-5ths untuk 5/5 = lebar penuh?
Alex
166

Untuk Bootstrap 3 , jika Anda ingin penuh-lebar dan menggunakan LESS, SASSatau sesuatu yang mirip, yang harus Anda lakukan adalah membuat penggunaan fungsi mixin Bootstrap ini make-md-column ,make-sm-column , dll

KURANG:

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

KELANCANGAN:

.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}

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:

.col-md-push-2-4{
  .make-md-column-push(2.4)
}
.col-md-pull-2-4{
  .make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  .make-md-column-offset(2.4)
}

KELANCANGAN:

.col-md-push-2-4{
  @include make-md-column-push(2.4)
}
.col-md-pull-2-4{
  @include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  @include make-md-column-offset(2.4)
}

Jawaban lain berbicara tentang pengaturan @gridColumnsyang 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.

lightswitch05
sumber
5
Solusi terbersih, seperti 2.45 dari 12 ( 2.4*5=12), berfungsi untuk Bootstrap 3 dalam kisi 12 kolom. Juga berlaku untuk make-xs,, make-smtetapi itu tidak akan berhasil dikombinasikan dengan definisi standar col lainnya (prioritas dapatkan terbaru)
Sherbrow
6
Saya terkejut dengan beberapa upvotes relatif untuk jawaban ini. Sejauh ini, ini adalah hacky yang paling sedikit, tidak hanya menggunakan konvensi penamaan yang sama dengan kelas-kelas kolom Bootstrap lainnya, tetapi juga mixins yang sama yang digunakan Bootstrap untuk membuat kolomnya sendiri, membuatnya mungkin tahan di masa depan hingga Bootstrap 4, paling tidak.
Chris Fritz
3
Ini seharusnya menjadi jawaban terbaik. Saya telah membuat perpustakaan (untuk memasukkan offset, pulldan push) berdasarkan ini untuk saya gunakan sendiri. Jangan ragu untuk memeriksanya
Kenny Ki
1
Seperti yang dikatakan semua orang, ya ini sekarang jawaban yang benar. @Sherbrow mengatakan mereka "tidak akan bekerja digabungkan dengan definisi col standar lainnya" tetapi ini bukan karena solusi ini salah dalam beberapa hal, itu hanya karena 12% 5! = 0.
Nick M
2
@ lightswitch05 Sayangnya itu tidak cocok untuk saya karena saya memiliki jumlah kolom yang dinamis. Jika saya hanya memiliki satu kolom, saya masih menginginkannya menjadi 5 dari layar tetapi menggunakan jawaban Fizzix satu kolom akan menutupi seluruh layar. Saya berhasil menyelesaikannya dengan menggunakan fungsi mixin Bootstrap 4 yang baru. Saya dapat memperbarui jawaban Anda untuk memasukkan ini jika Anda suka?
Plog
40

Perbarui 2019

Bootstrap 4.1+

Berikut adalah 5 kolom lebar penuh yang sama ( tidak ada CSS atau SASS tambahan ) menggunakan kisi tata letak otomatis :

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://www.codeply.com/go/MJTglTsq9h

Solusi ini berfungsi karena Bootstrap 4 sekarang flexbox. Anda bisa mendapatkan 5 kolom untuk dibungkus dengan yang sama .rowmenggunakan jeda seperti <div class="col-12"></div>atau <div class="w-100"></div>setiap 5 kolom.

Lihat juga: Bootstrap - 5 layout kolom

Zim
sumber
2
Tidak sabar untuk menjadi stabil :)
nicolallias
2
Bagus tapi hanya berfungsi dengan deretan 5 elemen. Jika Anda mendapatkan lebih banyak Anda salah. Lihat biola yang disempurnakan di sini: jsfiddle.net/djibe89/ntq8h910
djibe
Itu sebabnya saya menjelaskan Anda harus menggunakan istirahat setiap 5 kolom. Solusi Anda berfungsi tetapi membutuhkan CSS tambahan.
Zim
Pertimbangkan juga flex-nowrapuntuk menambah .rowkarena kolom (otomatis) dapat melebihi lebar induk.
Luuk Skeur
31

Di bawah ini adalah kombinasi jawaban @machineaddict dan @Mafnah, ditulis ulang untuk Bootstrap 3 (sejauh ini berfungsi dengan baik untuk saya):

@media (min-width: 768px){
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2  {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
plaidcorp
sumber
Di mana saya menempatkan ini dan bagaimana cara menggunakannya?
sergserg
1
@Serg 1. Letakkan di bawah / setelah file css Bootstrap 2. Tambahkan kelas .fivecolumns ke .row, lalu buat sarang lima kolom dengan kelas .col [, - sm, -lg] -2
plaidcorp
Tidak menjadi lebar penuh sempurna dalam beberapa kasus.
Fizzix
Mengapa col-xs-2 tidak ditambahkan ke deklarasi?
ganders
@ penjaga hanya melihat dari atas; lihat jawaban lain di halaman ini: stackoverflow.com/questions/10387740/…
plaidcorp
27

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:

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

Dan html:

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

Catatan: Meskipun rentang2 kali 5 tidak sama dengan 12 kolom, Anda mendapatkan idenya :)

Contoh kerja dapat ditemukan di sini http://jsfiddle.net/v3Uy5/6/

tambahan mesin
sumber
10

Jika Anda tidak membutuhkan lebar kolom yang sama persis, Anda dapat mencoba membuat 5 kolom menggunakan nesting:

<div class="container">
    <div class="row">
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-6 column">Column 1</div>
                <div class="col-xs-6 column">Column 2</div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-4 column">Column 3</div>
                <div class="col-xs-4 column">Column 4</div>
                <div class="col-xs-4 column">Column 5</div>
            </div>
        </div>
    </div>
</div>

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

DraggonZ
sumber
9

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

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

Unduh bangunan Anda. Kisi ini akan masuk ke dalam wadah default, menjaga lebar selokan standar (hampir).

Catatan: Jika Anda menggunakan KURANG, perbarui variables.lesssaja.

Pavlo
sumber
7

Dengan flexbox http://output.jsbin.com/juziwu

.flexrow {
  display: flex;
  background: lightgray; /*for debug*/
}
.flexrow > * {
  flex: 1;
  margin: 1em;
  outline: auto green;
}
<div class="flexrow">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...<br>..</div>
  <div>...</div>
</div>

caub
sumber
flexbox lebih baik daripada bootstrap jika sesuai dengan kebutuhan Anda.
ml242
6

Saya memilih jawaban Mafnah tetapi melihat ini lagi saya sarankan berikut ini lebih baik jika Anda menjaga margin default dll.

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 17.9%;
}
Studio4
sumber
1
Lebar sebenarnya adalah 17,94872% dan tidak responsif, Anda harus menetapkan margin baru untuk setiap kolom di semua kueri media @.
machineaddict
5
<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 20%;
}
Mafnah
sumber
1
itu harus. sama dengan .span2 {width: 20%; }
Studio4
... dan TIDAK berfungsi. setiap kolom, kecuali yang pertama, memiliki margin tersisa.
machineaddict
5

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

<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
agDev
sumber
5

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:

.col-2-4 {
    @include make-col-ready(); // apply standard column margins, padding, etc.
    @include make-col(2.4); // 12/5 = 2.4
}
.col-sm-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(sm) {
        @include make-col(2.4);
    }
}
.col-md-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(md) {
        @include make-col(2.4);
    }
}
.col-lg-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(lg) {
        @include make-col(2.4);
    }
}
.col-xl-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(xl) {
        @include make-col(2.4);
    }
}

HTML:

<div class="container">    
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 5</div>
    <div class="col-12 col-sm-2-4">2 of 5</div>
    <div class="col-12 col-sm-2-4">3 of 5</div>
    <div class="col-12 col-sm-2-4">4 of 5</div>
    <div class="col-12 col-sm-2-4">5 of 5</div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
    <div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
  </div>
</div>
daGUY
sumber
4

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-columnsdari 12ke 20. Maka Anda akan dapat membuat 4 serta 5 kolom.

Nipson
sumber
3

Ini bisa dilakukan dengan bersarang dan menggunakan sedikit css over-ride.

<div class="col-sm-12">
<div class="row">
  <div class="col-sm-7 five-three">
    <div class="row">
      <div class="col-sm-4">
      Column 1
      </div>
      <div class="col-sm-4">
      Column 2
      </div>
      <div class="col-sm-4">
      Column 3
      </div><!-- end inner row -->
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6">
        Col 4
      </div>
      <div class="col-sm-6">
      Col 5
      </div>
    </div><!-- end inner row -->
  </div>
</div><!-- end outer row -->

Lalu beberapa css

@media  (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
}

div.col-sm-5.five-two {
width: 40% !important;
}

}

Berikut ini sebuah contoh: 5 contoh kolom yang sama

Dan inilah tulisan lengkap saya di coderwall

Lima kolom yang sama di bootstrap 3

bradrice
sumber
3

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.

/*
 * Special grid for ten columns, 
 * using its own scope 
 * so it does not interfere with the rest of the code
 */

& {
    @import (multiple) "../bootstrap-3.2.0/less/variables.less";
    @grid-columns: 5;
    @import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

    @column: 1;
    .col-xs-5ths {
        .make-xs-column(@column);
    }

    .col-sm-5ths {
        .make-sm-column(@column);
    }

    .col-md-5ths {
        .make-md-column(@column);
    }

    .col-lg-5ths {
        .make-lg-column(@column);
    }
}

/***************************************/
/* Using default bootstrap now
/***************************************/

@import  (multiple) "../bootstrap-3.2.0/less/variables.less";
@import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

/* ... your normal less definitions */
vitro
sumber
3

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

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

dan beberapa kode html

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>
byteC0de
sumber
3

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.

<div class="row">
<div class="col-md-1"></div>    
<div class="col-md-2">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-2">4</div>
<div class="col-md-2">5</div>
<div class="col-md-1"></div>
</div>
Manish Verma
sumber
3

Tata letak 5 kolom dengan gaya Twitter Bootstrap

.col-xs-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 100%;
    float: left;
}
@media (min-width: 768px) {
.col-xs-15 {
        width: 50%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
Sanjib Debnath
sumber
3

Sebuah solusi yang tidak memerlukan banyak CSS, atau mengubah pengaturan bootstrap 12col default:

http://jsfiddle.net/0ufdyeur/1/

HTML:

<div class="stretch">
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
</div>

CSS:

@media (min-width: 1200px) { /*if not lg, change this criteria*/
  .stretch{
    width: 120%; /*the actual trick*/
  }
}
nicolallias
sumber
3

Cukup buat kelas baru dan tentukan perilakunya per setiap permintaan media sesuai kebutuhan

@media(min-width: 768px){
  .col-1-5{
    width: 20%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-1-5">col 1</div>
    <div class="col-1-5">col 2</div>
    <div class="col-1-5">col 3</div>
    <div class="col-1-5">col 4</div>
    <div class="col-1-5">col 5</div>
  </div>
</div>

di sini adalah demo yang berfungsi https://codepen.io/giorgosk/pen/BRVorW

GiorgosK
sumber
2

Di bootstrap 3, saya pikir kita bisa melakukan sesuatu seperti itu, untuk menghapus margin kiri dan kanan:

<div class="row this_row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

dan CSS

.this_row {
    margin: 0 -5%;
}
guaph
sumber
2

Bagaimana Anda dapat menambahkan kisi 5 kolom di bootstrap

.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;}
.item{width:100%;height:100px; background-color:#cfcfcf;}
.col-xs-1-5{width: 20%;float:left;} }

@media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} }
@media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} }
@media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} }
<div class="row">
  <div class="col-sm-1-5">
    <div class="item">Item 1</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 2</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 3</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 4</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 5</div>
  </div>
</div>

Robind Kumar
sumber
2

solusi termudah tanpa perlu mengedit CSS adalah:

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

Dan jika Anda membutuhkannya untuk menembus melampaui breakpoint, buat saja blok btn-grup. Semoga ini bisa membantu seseorang.

Vikas Baru
sumber
2

Lima kolom jelas bukan bagian dari desain bootstrap.

Tetapi dengan Bootstrap v4 (alpha), ada 2 hal untuk membantu dengan tata letak kotak yang rumit

  1. Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ), jenis elemen baru (resmi - https://www.w3.org/TR/css-flexbox-1/ )
  2. Utilitas responsif ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ )

Secara sederhana, saya menggunakan

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

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

Gonatee
sumber
2

Saya telah membuat definisi mixin SASS berdasarkan pada definisi bootstrap untuk sejumlah kolom (secara pribadi di samping 12 saya menggunakan 8, 10 dan 24):

// Extended bootstrap grid system
//
// Framework grid generation
//
// Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num.

@mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}";
    }
    #{$list} {
        position: relative;
        min-height: 1px;
        padding-left:  ($grid-gutter-width / 2);
        padding-right: ($grid-gutter-width / 2);
    }
}


@mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}";
    }
    #{$list} {
        float: left;
    }
}


@mixin calc-extended-grid-column($index, $num-columns, $class, $type) {
    @if ($type == width) and ($index > 0) {
        .col-#{$class}-#{$index}-#{$num-columns} {
            width: percentage(($index / $num-columns));
        }
    }
    @if ($type == push) and ($index > 0) {
        .col-#{$class}-push-#{$index}-#{$num-columns} {
            left: percentage(($index / $num-columns));
        }
    }
    @if ($type == pull) and ($index > 0) {
        .col-#{$class}-pull-#{$index}-#{$num-columns} {
            right: percentage(($index / $num-columns));
        }
    }
    @if ($type == offset) and ($index > 0) {
        .col-#{$class}-offset-#{$index}-#{$num-columns} {
            margin-left: percentage(($index / $num-columns));
        }
    }
}

@mixin loop-extended-grid-columns($num-columns, $class, $type) {
    @for $i from 1 through $num-columns - 1 {
        @include calc-extended-grid-column($i, $num-columns, $class, $type);
    }
}

@mixin make-extended-grid($class, $num-columns) {
    @include float-extended-grid-columns($class, $num-columns);
    @include loop-extended-grid-columns($num-columns, $class, width);
    @include loop-extended-grid-columns($num-columns, $class, pull);
    @include loop-extended-grid-columns($num-columns, $class, push);
    @include loop-extended-grid-columns($num-columns, $class, offset);
}

Dan Anda cukup membuat kelas dengan:

$possible-number-extended-grid-columns: 8, 10, 24;

@each $num-columns in $possible-number-extended-grid-columns {

  // Columns

  @include make-extended-grid-columns($num-columns);

  // Extra small grid

  @include make-extended-grid(xs, $num-columns);

  // Small grid

  @media (min-width: $screen-sm-min) {
    @include make-extended-grid(sm, $num-columns);
  }

  // Medium grid

  @media (min-width: $screen-md-min) {
    @include make-extended-grid(md, $num-columns);
  }

  // Large grid

  @media (min-width: $screen-lg-min) {
    @include make-extended-grid(lg, $num-columns);
  }

}

Saya harap seseorang akan merasakan manfaatnya

Nulen
sumber
2

Apakah seseorang menggunakan bootstrap-sass (v3), berikut adalah kode sederhana untuk 5 kolom menggunakan campuran bootstrap:

  .col-xs-5ths {
     @include make-xs-column(2.4);
  }

  @media (min-width: $screen-sm-min) {
     .col-sm-5ths {
        @include make-sm-column(2.4);
     }
  }

  @media (min-width: $screen-md-min) {
     .col-md-5ths {
        @include make-md-column(2.4);
     }
  }

  @media (min-width: $screen-lg-min) {
     .col-lg-5ths {
        @include make-lg-column(2.4);
     }
  }

Pastikan Anda telah memasukkan:

@import "bootstrap/variables";
@import "bootstrap/mixins";
Vedmant
sumber
1
terima kasih, ini adalah apa yang saya cari, saya membuat 1-5 dan 2-5 dll dan bahkan 3-10 dll sekarang juga, untuk memiliki lebih banyak fleksibilitas, sangat mudah
morksinaanab
2

Untuk Bootstrap 4.4+

Gunakan row-cols-nkelas baru .

  1. Tambahkan row-cols-5kelas ke .rowdiv Anda . Tidak perlu CSS khusus.
  2. Lihat 4.4 doc di sini untuk baris-cols: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Untuk versi Bootstrap 4 sebelum Bootstrap 4.4

  1. Salin CSS di bawah ini (CSS luar biasa dari penulis Bootstrap) dan tambahkan ke proyek Anda

  2. 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%}}

djibe
sumber
1

.col-xs-2-4 {
  position: relative;
  float: left;
  width: 20%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-sm-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .col-sm-2-4 {
    float: left;
    width: 20%;
  }
}
.col-md-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .col-md-2-4 {
    float: left;
    width: 20%;
  }
}
.col-lg-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .col-lg-2-4 {
    float: left;
    width: 20%;
  }
}

Aroos
sumber