Col-lg-itme kullanarak ve-lg-col çekin Twitter Bootstrap 3 sütun düzeni manipülasyon
Şimdi Twitter Bootstrap belgeleri okuyorum 3, sütun ve bu sayfada gösterilen sipariş (http://getbootstrap.com/css/#grid) takip etmeye çalıştı ama duvara çarptı. Böyle bir kodu neden çalışıyor ne de doğru ayarı belirtmek için nasıl anlamıyorum. Göstermek istediğim uzunluğu 5 ve diğer uzunluğu 5, ve son olarak bir uzunluk 2 ızgara oluşan bir kılavuz.
Böyle bir şey benim olacak:
[5] [5] [2]
Ve ne ben ulaşmak istiyorum, ne zaman izlendi Masaüstü düzeni üzerinde görüntülenen, ama ne zaman görüntülenmiş mobil, göstermek istediğim ikinci uzunluğu 5 nesne ilk, sonra ilk uzunluğu 5 nesne ve nihayet uzunluğu 2 nesne, dikey olarak. Süre çalıştım izleyin adım anlatıldığı yukarıdaki belgelere, aldığım ilk uzunluğu 5 nesnenin üzerine ikincisi olmasına rağmen mobil platformlar, dediğim gibi gereken ekran ikinci uzunluğu 5 nesne üzerinde üst...
Nasıl doğru ilk üstten ikinci koyabilir miyim? Ya da aynı uzunlukta nesne kullandıkları için, Sütun Sıralama çalışmıyor olabilir mi?
İşte bilgi için benim kod:
<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>
Ayrıca, belgeleri pull
push
ne anlama geldiğini açıklığa kavuşturmak değil. Yani ben bir şey eksik?
Teşekkürler.
CEVAP
Bu yanıta bakın aşağıda resmi serbest bırakmak için iki parça halinde
Hatta col-lg-push-x ya da RC1 için orijinal dosyaları çekin sınıflar indirdim, bootstrap kontrol edin bulamadım.css dosyası. umarım bu RC2 çözmek olacak bir şey.
neyse, col-push-* ve çekme dersleri var ve bu ihtiyacınızı karşılayacak. Here is a demo
<div class="row">
<div class="col-sm-5 col-push-5">
Content B
</div>
<div class="col-sm-5 col-pull-5">
Content A
</div>
<div class="col-sm-2">
Content C
</div>
</div>
RESMİ SÜRÜM v3 İÇİN CEVAP AŞAĞIDA.EDİT: 0
Ayrıca bakınız This blog post on the subject
col-vp-push-x
= sağ tarafından sütun itinxsütunlar, sütun normalde ^ yapabilmekti yerden başlayan dizi .position: relative
vpya da daha büyük görüntüle port.col-vp-pull-x
= soldaki sütunu çekinxsütunlar, sütun normalde ^ yapabilmekti yerden başlayan dizi .position: relative
vpya da daha büyük görüntüle port.vp= x'ler, sm, md, ya da lg
x= 1 12 thru
Çoğu insan ne kadar uğraşırsa benceHTML biçimlendirme (örnek, B önce gelir) . sütunların sırasını değiştirmek için ihtiyaç vardır bu sadece daha büyük ya da belirtilen için eşit görünüm-port çekerek yapar. yani col-sm-push-5
sadece 5 sütun sm
görüntüleme portu veya daha fazla itecektir. Bu Bootstrap "mobil ilk HTML siteyi. mobil versiyonu yansıtmalıdır" çerçevesinde, bir olmasıdır Bu İtme ve çekmenin daha sonra daha büyük ekranlar üzerinde yapılır.
- (Masaüstü) daha Büyük.
- (Cep) daha Küçük.
<div class="row">
<div class="col-sm-5 col-sm-push-5">
Content B
</div>
<div class="col-sm-5 col-sm-pull-5">
Content A
</div>
<div class="col-sm-2">
Content C
</div>
</div>
View-port >= sm
|A|B|C|
Görünümü-bağlantı noktası < sm
|B|
|A|
|C|
Merkezi sütun kullanarak Bootstrap 3 T...
Twitter kullanarak eşit sütun yüksekli...
Ne kadar bencil içerik Twitter bootstr...
Twitter bootstrap beş eşit sütun...
Nasıl gezinti çubuğu daraltmak eşik bo...