SORU
5 AĞUSTOS 2013, PAZARTESİ


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
6 AĞUSTOS 2013, Salı


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

DEMO

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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Fuse

    Fuse

    21 Kasım 2005
  • Julia Graf

    Julia Graf

    6 Mayıs 2006
  • Malwarebytes

    Malwarebytes

    22 Temmuz 2007