Oluşturduğum bir sayfada 5 eşit sütuna sahip olmak istiyorum ve burada 5 sütun ızgarasının nasıl kullanıldığını anlayamıyorum: http://web.archive.org/web/20120416024539/http://domain7 .com / mobil / araçları / önyükleme / tepkili

Beş sütun ızgarası twitter önyükleme çerçevesinin üzerinde gösteriliyor mu?

Bir span2 sınıfıyla beş div kullanın ve ilkine bir offset1 sınıfı verin.

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

İşte bu kadar! Beş eşit aralıklı ve ortalanmış sütun.

Önyükleme 3.0'da bu kod şöyle görünür

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

Bootstrap 3 ve üstü için

Twitter Bootstrap ile fantastik tam genişlikte 5 sütun düzeni burada oluşturuldu .

Bootstrap 3 ile sorunsuz bir şekilde çalıştığı için bu en gelişmiş çözümdür. Duyarlı tasarım için sınıfları mevcut Bootstrap sınıflarıyla eşleştirerek tekrar tekrar kullanmanızı sağlar.

CSS:
Bunu global stil sayfanıza, hatta bootstrap.cssbelgenizin altına ekleyin .

.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;
    }
}

Kullanın!
Örneğin, orta ekranlarda beş sütun düzeni ve küçük ekranlarda iki sütun gibi davranan bir div öğesi oluşturmak istiyorsanız, sadece şöyle bir şey kullanmanız gerekir:

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

ÇALIŞMA DEMOSU - Sütunların yanıt verdiğini görmek için çerçeveyi genişletin.

BAŞKA DEMO - yeni dahil edilmesicol-*-5thsgibi başkaları ile sınıflarıcol-*-3vecol-*-2. Tümününcol-xs-6duyarlı görünümdedeğiştiğini görmek için çerçeveyi yeniden boyutlandırın.

Bootstrap 4 için

Bootstrap 4 artık varsayılan olarak flexbox kullanıyor, böylece sihirli güçlerine kutudan çıkar çıkmaz erişebiliyorsunuz. Check out otomatik düzen sütunları dinamik olarak iç içe kaç sütun bağlı genişliği ayarlayın.

İşte bir örnek:

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

ÇALIŞMA DEMOSU

İçin Bootstrap 3 İsterseniz tam genişliğe ve kullandığınız LESS, SASSbenzer bir şey, ya da, yapmanız gereken tek şey make kullanımıdır Bootstrap adlı mixin fonksiyonları make-md-column , make-sm-columnvb

AZ:

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

SUKDÖ'nün:

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

Sadece siz inşa edebilirsiniz gerçek tam genişlikli önyükleme kolon sınıfları bu katmalar kullanarak, ama aynı zamanda tüm inşa edebilirsiniz , ilgili yardımcı sınıflar gibi .col-md-push-*, .col-md-pull-*ve .col-md-offset-*:

AZ:

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

SUKDÖ'nün:

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

Diğer cevaplar @gridColumns, tamamen geçerli olan ancak tüm önyükleme için temel sütun genişliğini değiştiren ayar hakkında konuşur . Yukarıdaki mixin işlevlerinin kullanılması, varsayılan önyükleme sütunlarının üstüne 5 sütun düzeni ekleyeceğinden, herhangi bir 3. taraf aracını veya mevcut stili bozmaz.

2019 Güncellemesi

Bootstrap 4.1+

Otomatik düzen ızgarasını kullanan 5 eşit, tam genişlikte sütun ( ekstra CSS veya SASS yok ) :

<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

Bu çözüm, Bootstrap 4 şimdi flexbox olduğu için işe yarıyor. Her 5 sütunda veya her 5 sütunda .rowbir ara kullanarak aynı sütunun içinde 5 sütun alabilirsiniz.<div class="col-12"></div><div class="w-100"></div>

Ayrıca bakınız: Bootstrap - 5 sütun düzeni

Aşağıda, Bootstrap 3 için yeniden yazılmış (şimdiye kadar benim için iyi çalışıyor) @Machineaddict ve @Mafnah cevaplarının bir kombinasyonu:

@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%;
    }
}

Orijinal önyüklemeyi 12 sütunlu tutun, özelleştirmeyin. Yapmanız gereken tek değişiklik sonra css , orijinal bootstrap duyarlı css'den css'lerdir, şöyle:

Aşağıdaki kod Bootstrap 2.3.2 için test edilmiştir:

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

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

Not: span2 çarpı 5 12 sütuna eşit olmasa da, fikri anlarsınız :)

Çalışan bir örnek burada bulunabilir http://jsfiddle.net/v3Uy5/6/

Tam olarak aynı sütun genişliğine ihtiyacınız yoksa, iç içe yerleştirmeyi kullanarak 5 sütun oluşturmayı deneyebilirsiniz:

<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

İlk iki sütunun genişliği 5/12 * 1/2 ~ 20.83% olacaktır

Son üç sütun: 7/12 * 1/3 ~% 19,44

Bu tür bir saldırı birçok durumda kabul edilebilir sonuç verir ve herhangi bir CSS değişikliği gerektirmez (yalnızca yerel önyükleme sınıflarını kullanıyoruz).

5 sütun düzeni için özel bir Bootstrap indirmesi oluşturma

Go Bootstrap 2.3.2 (veya Bootstrap 3 ) Özelleştirme sayfasının ve set Aşağıdaki değişkenler (giriş değil noktalı virgül do):

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

Yapınızı indirin. Bu ızgara, varsayılan oluk genişliklerini (neredeyse) koruyarak varsayılan kaplara sığar.

Not: Daha az kullanıyorsanız, variables.lessbunun yerine güncelleyin .

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

Mafnah'ın cevabını oyladım ama buna tekrar bakarak, varsayılan kenar boşluklarını koruyorsanız aşağıdakilerin daha iyi olduğunu öneririm.

<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%;
}

<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%;
}

Col-sm-2 sınıfı ile 5 öğe oluşturun ve birinci öğeye col-sm-offset-1 sınıfı da ekleyin

Ps bu tam genişlikte olmayacak (ekranın sağından ve solundan biraz girintili olacak)

Kod şöyle görünmelidir

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

Bootstrap 4, satır başına değişken sütun sayısı

Satır başına en fazla beş sütun olmasını istiyorsanız, daha az sayıda sütun hala satırın yalnızca 1 / 5'ini kaplar , çözüm Bootstrap 4'ün karışımlarını kullanmaktır :

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>

Bootstrap 3'te 5 sütunu etkinleştirmenin başka bir yolu, Bootstrap tarafından varsayılan olarak kullanılan 12 sütun biçimini değiştirmektir. Ve sonra 20 sütun ızgarası oluşturun (Bootstrap web sitesinde özelleştir kullanın VEYA LESS / SASS sürümünü kullanın).

Önyükleme web sitesinde özelleştirmek için şu adrese gidin özelleştir ve İndirme sayfasına, güncelleme değişkeni @grid-columnsgelen 12etmek 20. Daha sonra 4 ve 5 sütun oluşturabilirsiniz.

Yuvalama ve biraz css over-ride kullanılarak yapılabilir.

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

Sonra bazı css

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

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

}

İşte bir örnek: 5 eşit sütun örneği

İşte kod duvarına tam yazım

Bootstrap 3'te beş eşit sütun

Bence daha az sözdizimi ile böyle kullanmak daha iyidir. Bu cevap @fizzix'in cevabına dayanıyor

Bu şekilde sütunlar, kullanıcının geçersiz kılabileceği değişkenleri (@ grid-gutter-width, media breakpoint) kullanır ve beş sütunun davranışı 12 sütun ızgarasının davranışıyla eşleşir.

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

Bu harika: http://www.ianmccullough.net/5-column-bootstrap-layout/

Sadece yap:

<div class="col-xs-2 col-xs-15">

Ve CSS:

.col-xs-15{
    width:20%;
}

Varsayılan olarak Bootstrap, beş sütun düzeni oluşturmamıza izin veren ızgara sistemi sağlamaz, Bootstrap'in css dosyanızda bazı özel sınıflar ve medya sorguları oluşturma biçiminde varsayılan sütun tanımı oluşturmanız gerekir

.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;
    }
}

ve bazı html kodu

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

Önyükleme varsayılan olarak 12 sütuna kadar ölçeklenebilir mi? Bu, eşit genişlikte 12 sütunlu bir düzen oluşturmak istiyorsak, div class = "col-md-1" içine on iki kez yazacağımız anlamına gelir.

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

Twitter Bootstrap stiliyle 5 sütun düzeni

.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;
    }
}

Çok fazla CSS gerektirmeyen veya tweaking bootstrap varsayılan 12col düzenine sahip olmayan bir çözüm:

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*/
  }
}

Sadece yeni bir sınıf oluşturun ve her bir medya sorgusu başına davranışını gerektiği gibi tanımlayın

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

İşte çalışan bir demo https://codepen.io/giorgosk/pen/BRVorW

Bootstrap 3'te, sol ve sağ kenar boşluğunu kaldırmak için böyle bir şey yapabileceğimizi düşünüyorum:

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

ve CSS

.this_row {
    margin: 0 -5%;
}

Bootstrap'a 5 sütun ızgarası nasıl ekleyebilirsiniz?

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

CSS'yi düzenlemeye gerek kalmadan en kolay çözüm:

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

Ve herhangi bir kırılma noktasının ötesine geçmek için bunlara ihtiyacınız varsa, btn-grup bloğu yapın. Umarım bu birine yardımcı olur.

Beş sütun, tasarımın önyüklemesinin bir parçası değildir.

Ancak Bootstrap v4 (alfa) ile karmaşık bir ızgara düzenine yardımcı olacak 2 şey var

1. Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ), yeni öğe türü (resmi - https://www.w3.org/TR/css-flexbox-1/ )
2. Duyarlı yardımcı programlar ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ )

Basit bir ifadeyle,

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

5,7,9,11,13 ya da başka bir şey olsun, iyi olacak. 12 ızgaralı standardın kullanım durumunun% 90'ından fazlasını sunabileceğinden eminim - bu şekilde tasarlayalım - daha kolay geliştirelim!

Güzel esnek öğretici burada " https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "

Herhangi bir sayıda sütun için (kişisel olarak 12, 8, 10 ve 24 kullanıyorum) için bootstrap tanımlarına dayanan SASS mixin tanımları oluşturdum:

// 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);
}

Ve basitçe sınıflar oluşturabilirsiniz:

$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);
  }

}

Umarım birisi faydalı bulur

Birisi bootstrap-sass (v3) kullanıyor mu, burada bootstrap karışımlarını kullanan 5 sütun için basit kod:

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

Eklediğinizden emin olun:

@import "bootstrap/variables";
@import "bootstrap/mixins";

Bootstrap 4.4+ için

Yepyeni row-cols-nsınıfları kullanın .

1. Div'inize row-cols-5sınıf ekleyin .row. Özel CSS gerekmez.
2. Sıralı sütunlar için buradaki 4.4 dokümana bakın: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Bootstrap 4.4'ten önceki Bootstrap 4 sürümleri için

1. Aşağıdaki CSS'yi kopyalayın (Bootstrap yazarları tarafından harika CSS) ve projenize ekleyin

2. Doğru kullanmak için yukarıda belirtilen dokümanları okuyun.

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