Bootstrap satırını 5 eşit parçaya bölme nasıl?

Question

bootstrap satırını 5 eşit parçaya bölmek istiyorum. 12-col-md içerir, bu yüzden onu eşit 5 parçaya nasıl ayırabilirim?

Bu problemi çözmemde bana yardımcı olan var mı?

Answer 1

Maksimum alan miktarını kullanmak için span2 kullanabilirsiniz.

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

Answer 2

İlk konteyner böylece sol ve sağdaki aynı marjı (col-sm-1) sahip olacaktır ofset olacak

<div class="container"> 
    <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> 
</div> 

gibi bir şey kullanabilirsiniz: kodunu bulabilirsiniz İçinde 5 eşit konteynır ile yan.

Answer 3

Eski önyükleme Sürüm

Kullanım beş span2 bir sınıf ile div'ler ve Offset1 ilk bir sınıf verir.

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

Beş eşit aralıklı ve ortalanmış sütun.

---

Önyükleme 3.0 ve 4 alfa.

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

---

ÖZEL STİL

Özel Styles

.container {width:100%; float:left;} 
.col1{ width:20%; float:left} 

Son Tablo stili

.container {width:100%;display:table;} 
.col1{ width:20%; display:table-cell;} 

Answer 4

Bunu çözmenin mükemmel bir yolu here! Bootstrap bize beş sütun düzeni oluşturmanızı sağlar ızgara sistemini sağlar, ancak bunun oldukça basit gördüğünüz gibi değil Varsayılan olarak

. Öncelikle, Bootstrap'in yapacağı şekilde varsayılan sütun tanımını oluşturmanız gerekir. Derslerimi aradım -..- 15.

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

Daha sonra, farklı ortam sorguları olması durumunda yeni sınıfların genişliğini tanımlamanız gerekir.

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

Artık, sınıflarınızı orijinal Bootstrap sınıflarıyla birleştirmeye hazırsınız. [Beş eşit sütun

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