it-swarm-id.com

Cara menggunakan bootstrap dengan 16 atau 24 kolom

Saya butuh bantuan mengatur bootstrap 2.0.4 menjadi 16 atau 24 kolom, bukan 12 kolom default. Saya tidak mengerti apa yang saya lakukan salah. Saya mencoba opsi kustomisasi di situs bootstrap dan saya mencoba mengubah variabel grid pada variabel File .less dan kompilasi ulang bootstrap.less menggunakan Crunch tetapi untuk kedua percobaan saya masih memiliki hasil yang sama. masih 12 kolom !!! ketika saya mencoba untuk mengatur div menjadi span12 masih membutuhkan seluruh layar?

Adakah yang bisa membimbing saya untuk apa yang saya lakukan salah atau jika seseorang dapat menghasilkan versi 16 dan 24 kolom dan mengirimkannya kepada saya itu akan menjadi sempurna

22
Joseph Girgis

Metode ini untuk Bootstrap versi lama - Versi 2.3.1

Klik tautan ini untuk menyesuaikan bootstrap: http://Twitter.github.com/bootstrap/customize.html

Anda akan menemukan contoh seperti ini. Ubah parameter agar sesuai dengan kebutuhan Anda.

16 Grid system with Gutter
@gridColumns: 16
@gridColumnWidth: 45px
@gridGutterWidth: 15px
@gridColumnWidth1200: 52.5px
@gridGutterWidth1200: 22.5px
@gridColumnWidth768: 31.5px
@gridGutterWidth768: 15px

16 Grid system without Gutter
@gridColumns: 16
@gridColumnWidth: 60px
@gridGutterWidth: 0px
@gridColumnWidth1200: 75px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 46.5px
@gridGutterWidth768: 0px

24 Grid system with Gutter
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px

24 Grid system without Gutter
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px
19
Hasan Atbinici

Cukup sederhana untuk diubah dalam waktu kurang - http://Twitter.github.com/bootstrap/scaffolding.html#gridCustomization

Anda ingin mengubah variabel di sana menjadi apa yang Anda inginkan - 

misalnya.

@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 10px

Jika menggunakan fluida-grid, Anda akan ingin mengubah variabel-variabel ini juga secara proporsional, jika span12 masih akan mengambil 100% dari lebar dan span24 akan mengambil 200%

@fluidGridColumnWidth
@fluidGridGutterWidth

Sebagaimana dinyatakan:

Bagaimana cara menyesuaikan

Mengubah kisi berarti mengubah tiga variabel @ kisi * dan mengkompilasi ulang Bootstrap. Ubah variabel kisi dalam variabel.kurang dan gunakan salah satu dari empat cara yang didokumentasikan untuk mengkompilasi ulang. Jika Anda menambahkan lebih banyak kolom, pastikan untuk menambahkan CSS untuk yang ada di grid.less.

Anda dapat mengubah variabel dan mengunduh css baru di sini: http://Twitter.github.com/bootstrap/download.html#variables

Berikut ini contoh terkompilasi yang dapat digunakan untuk 16 kolom (belum diuji, beri tahu saya cara kerjanya): https://s3.amazonaws.com/intenex/bootstrap16columns.Zip

11
Intenex

Edit: Membuat kisi-kisi dengan jumlah kolom khusus telah dipulihkan, dan dapat dilakukan pada halaman kustomisasi Bootstrap .

Untuk alasan yang tidak saya ketahui, versi terbaru Bootstrap (3.0.0/1) tidak memungkinkan Anda membuat kisi berbeda dari 12 kolom, yang sangat memalukan. 

Apa yang dapat kita lakukan saat ini, dan yang pada gilirannya akan memungkinkan untuk membuat lebih banyak paket bootstrap yang dapat disesuaikan, adalah dengan mengatur penyesuai Bootstrap Anda sendiri.

Sunting: Saya baru saja mencobanya. Menginstal semua dependensi berjalan cukup lancar sambil tetap berpegang pada pedoman pada halaman Docs GitHub mereka.

Sampel dihasilkan 24 kisi kolom

Editor required inserting some code along with jsfiddle link. There's no point in pasting anything though.
4
Maciej Gurban

16 Kolom

960px

45px * 16 = 720 Kolom

15px * 16 = 240 Talang

1200px

53px * 16 = 848 Kolom

22px * 16 = 352 Talang

768px

33px * 16 = 528 Kolom

15px * 16 = 240 Talang

3
User

Diperbarui 2018

Meninjau kembali pertanyaan ini untuk Bootstrap 4. Sekarang Bootstrap 4 adalah flexbox, dan termasuk kolom tata letak otomatis , mudah untuk membuat tata letak dengan sejumlah kolom n .. .

16 kolom

<div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                ... to 16
            </div>
</div>

24 kolom

<div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                ... to 24
            </div>
</div>

Demo: https://www.codeply.com/go/4sQGt2qKyr


Juga lihat: N jumlah kolom dalam Bootstrap 4

1
Zim

Anda dapat mengganti atribut lebar dengan persentase seperti ini:

    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>

Bahkan akan mempertahankan kemampuan responsif.

0
Chieu Nhat Nang

Set 24 Kolom:

960
Kolom 35px
5px Talang

1200
Kolom 40px
Talang 10px

768
Kolom 29px
Talang 3px

0
User

Ini adalah cara cepat dan mudah yang saya temukan untuk melakukan 16 kolom menggunakan ...

.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
<div class="row">
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
</div>
<!-- row -->

0
nalcus

Saya menggunakan kolom Grid 30 untuk proyek saya (Grid 24 dan 100 juga tersedia)

https://github.com/zirafa/bootstrap-grid-only

beberapa penyesuaian mungkin diperlukan tergantung pada kebutuhan Anda

0
Arun Prasad E S