Tek bir sayı olduğunda Bootstrap sütunları nasıl ortalanır?

Question

Bootstrap kullanarak bir görüntü kaydırıcısı oluşturuyorum ve kafamda çözemediğim bir sorunla karşılaşıyorum.

Bu kaydırıcının her bir örneğinde, 3 sütun küçük resimlerim olacak (her satırda 4). Ancak, bazı kaydırıcıların 4 küçük resmi olmayacak, bazıları 1, 2 veya 3 olacaktır. Bu örneklerde, küçük resimleri yatay olarak ortalamak istiyorum, ancak 4 tanesi varsa aynı 15px olukları koruyacaktım.

Artık sadece 2 minik resim görüntüsü olduğunda, bu kolay bir işlemdir, çünkü minik resimlerin kümesinden önce ve sonra boş bir 3 sütunlu div ekleyebilirim. Sadece 1 küçük resim olduğunda, float'u kaldırabilir ve margin:0 auto;'u kullanabilir, ancak 3 küçük resim olduğunda ne yapacağımı anlayamıyorum.

Bunu yapmanın en iyi yolunun ne olacağını söyleyen var mı? Yarım sütunlar oluşturabilmem için iyi olacağını düşünürdüm, bu yüzden küçük bir 1,5-kolunu divanlardan önce ve sonra ekleyebilirim. Bu uygun mu? Ben 1 küçük ve 2 küçük sürümleri için nasıl çözdüğünü gösteren bir Bootply kurdum

<div id="container"> 

    <div class="row"> 

    <!-- Full Size Image --> 
    <div class="col-sm-12"> 
     <img src="http://placehold.it/960x300" /> 
    </div> 

    <!-- Slider Thumbnails --> 
    <div class="col-sm-3"> 
     <img src="http://placehold.it/200x150" /> 
    </div> 
    <div class="col-sm-3"> 
     <img src="http://placehold.it/200x150" /> 
    </div> 
    <div class="col-sm-3"> 
     <img src="http://placehold.it/200x150" /> 
    </div> 

    </div> 

</div> 

Ve: İşte

3 küçük versiyonu için bazı örnek kod

Bootply

Answer 1

.row.text-center > div { 
    display: inline-block; 
    float: none; 
} 

<div class="row text-center"> 
    <!-- Slider Thumbnails --> 
    <div class="col-sm-3"> 
     <img src="http://placehold.it/200x150"> 
    </div> 
    ... 
</div> 

Demo

Answer 2

Benim durumumda, div, col-xs-11 sınıfına sahiptir. Yani, küçük ekranlar için merkezde mükemmel yapmak için aşağıdaki css eklendi. Not: float ve margin ayarlarının yapılması önemlidir.

padding-left:0; 
    padding-right:0; 
    float:none; 
    margin:auto 

Answer 3

Bootstrap 4: Merkezi Tek Sütunlar

Ben orijinal soru Bootstrap 3.x zaman çerçevesi olduğunu biliyorum, ama şimdi bu 4.x kolonların tek sayıları daha kolay merkezleme mevcuttur. İşte kullanılarak 5 eşit, tam genişlikli sütunlara bir örneği (hiçbir ekstra CSS) yenilikler auto-layout grid ..

<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

Bootstrap 4 şimdi FlexBox olduğunu ve aynı zamanda çalışır, çünkü bu çözüm çalışır Görünüm genelinde any number of odd columns.