Merkezi sütun kullanarak Bootstrap 3 Twitter

SORU

9 AĞUSTOS 2013, Cuma

Merkezi sütun kullanarak Bootstrap 3 Twitter

Nasıl Twitter Bootstrap 3 konteyner içinde bir sütun boyutta bir div (12 sütun) merkezi.

Marş fiddle bakın lütfen.

<body class="container">
    <div class="col-lg-1 col-offset-6 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Yani, bir sınıf div, centered bir kabın içinde ortalanmış olmasını istiyorum. Eğer birden fazla divs eğer orada bir satır kullanabilirim, ama şimdilik sadece bir sütun kap ortalanacak (12 sütun) boyutu ile bir div istiyorum.

Ayrıca yukarıdaki yaklaşım niyeti yarısı tarafından div ofset olarak yeterince iyi olduğundan emin değilim. div dışında serbest boşluk ve div orantılı olarak küçültmek içeriğini ihtiyacım yok. İstiyorumeşit olarak dağıtılacak div dışında boş(==bir sütun genişliği konteyner kadar küçültmek).

CEVAP

9 AĞUSTOS 2013, Cuma

<div> Bootstrap 3 sütun ortalama iki yaklaşım vardır:

Yaklaşım 1 (uzaklık):

İlk yaklaşım, biçimlendirme ve ekstra CSS hiçbir değişiklik gerektirir Bootstrap kendi ofset sınıfları kullanır. Anahtar etmektirbir satırın kalan boyutu yarısına eşit uzaklığı ayarlayın. Yani, örneğin, boyutu 2 sütun (12-2)/2 5, uzaklık ekleyerek merkezli olacaktır.

İşaretlemede bu gibi görünecektir:

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

Şimdi, bu yöntem için, bariz bir dezavantajı varsadece bile sütun boyutları için çalışıryani sadece .col-X-2, , *, *16.col-X-4col-X-6 ve col-X-10 desteklenir.

Yaklaşım 2 (eski margin:auto)

Yapabilirsinizmerkezi sütun boyutumargin: 0 auto; kanıtlanmış tekniği kullanarak, sadece Bootstrap ızgara sistemi tarafından eklenen yüzen dikkat etmek gerekir. Aşağıdaki gibi özel bir CSS sınıfı tanımlamak tavsiye ederim:

.col-centered{
    float: none;
    margin: 0 auto;
}

Şimdi herhangi bir ekran boyutunda herhangi bir sütun boyut eklemek ve sorunsuz bir şekilde Bootstrap ... ... duyarlı düzeni ile çalışacak :

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Not:Her iki teknikleri edebilirsin atla .row element ve sütun merkezli içinde .container ama eğer ki fark az bir fark gerçek sütun boyutu nedeniyle dolgu konteyner sınıf.

Güncelleme:

V3 beri.0.1 Bootstrap margin: 0 auto kullanır ama float:none eksik yerleşik sınıf center-block adlı bir vardır. CSS için bu kılavuz sistemi ile iş yapmak için ekleyebilirsiniz.