Şimdi Twitter Bootstrap 3'teki belgeleri okuyorum ve bu sayfada gösterildiği gibi sütun sırasını takip etmeye çalıştım, ancak duvara çarptı. Neden böyle bir kod çalışır ya da ayarı nasıl doğru belirtmek için anlamıyorum. Göstermek istediğim şey, 5 uzunluğu ve diğer uzunluğu 5 ve son olarak bir uzunluk 2 ızgarasından oluşan bir ızgara.

Yani benimki böyle bir şey:

[5] [5] [2]

Ve elde etmek istediğim şey, Masaüstünde görüntülendiğinde yukarıdaki düzen görüntülendiğinde, ancak mobilde görüntülendiğinde, önce ikinci uzunluk 5 nesnesini, ardından ilk uzunluk 5 nesnesini ve son olarak uzunluk 2 nesnesini göstermek istiyorum , dikey olarak. Bunun gibi:

[5] (second)
[5] (first)
[2]  

Yukarıdaki belgelerde açıklanan adımı izlemeye çalışırken, mobil platformlarda olmasına rağmen ilk uzunluk 5 nesnesini ikinci platformun üzerinde aldım, ki dediğim gibi ikinci uzunluk 5 nesnesini üstte göstermelidir. Başka bir deyişle, bunu anladım:

[5] (first)
[5] (second)
[2] 

Öyleyse ikincisini ilkini nasıl doğru bir şekilde koyabilirim? Ya da aynı uzunluktaki nesneyi kullandığım için sütun sıralaması işe yaramayabilir mi?

İşte bilgileriniz için kodum:

<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, belgeler ne pullveya ne pushanlama geldiğini netleştirmez . Yani bir şey mi kaçırıyorum?

Teşekkürler.

Bu cevap üç bölümden oluşmaktadır, resmi sürüm için aşağıya bakınız (v3 ve v4)

Hatta indirdiğim RC1 i için orijinal dosyalarda col-lg-push-x veya çekme sınıflarını bulamadım, bu yüzden bootstrap.css dosyanızı kontrol edin. Umarım bu RC2'de sıralayacakları bir şeydir.

her neyse, col-push- * ve pull sınıfları mevcuttu ve bu da ihtiyaçlarınızı karşılayacak. İşte bir 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>

DÜZENLEME: AŞAĞIDAKİ RESMİ BÜLTEN İÇİN CEVAP V3.0

Ayrıca bkz . Konuyla ilgili bu blog yazısı

• col-vp-push-x= sütunu , vp veya daha büyük bir görüntüleme bağlantı noktasında normalde -> oluşturulacağı yerden başlayarak x sütun sayısı kadar sağa itin .position: relative

• col-vp-pull-x= Göre sola doğru sütun çekme x kolon normal hale getirecektir burada itibaren sütun sayısı, -> position: relative, bir ilgili vp veya daha büyük görüntüleme noktası.

  vp = xs, sm, md veya lg

  x = 1 ila 12

Çoğu insanı mahveten şey, HTML işaretlemenizdeki sütunların sırasını değiştirmeniz gerektiğidir (aşağıdaki örnekte B, A'dan önce gelir) ve yalnızca, belirtilenden büyük veya ona eşit. yani görünüm bağlantı noktalarına col-sm-push-5yalnızca 5 smveya daha fazla sütun iter . Bunun nedeni, Bootstrap'ın "önce mobil" bir çerçeve olmasıdır, bu nedenle HTML'nizin sitenizin mobil sürümünü yansıtması gerekir. İtme ve Çekme daha sonra daha büyük ekranlarda yapılır.

• (Masaüstü) Daha büyük görüş portları itilir ve çekilir.
• (Mobil) Daha küçük görünüm bağlantı noktaları normal sırayla oluşturulur.

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>

Görünüm bağlantı noktası> = sm

|A|B|C|

Görüntüleme bağlantı noktası <sm

|B|
|A|
|C|

EDIT: AŞAĞIDAKİ v4.0 İÇİN CEVAP

V4 ile flexbox ve grid sistemindeki diğer değişiklikler geliyor ve push \ pull sınıfları flexbox sıralaması kullanmak için kaldırıldı.

• .order-*Görsel düzeni kontrol etmek için sınıfları kullanın (burada * = 1 - 12)
• Bu ayrıca ızgara katmanına özgü olabilir .order-md-*
• Ayrıca .order-first(-1) ve .order-last(13) kullanılabilir

<div class="row">
  <div class="col order-2">1st yet 2nd</div>
  <div class="col order-1">2nd yet 1st</div>
</div>

Div'i tarayıcının soluna doğru "çeker" ve Div'ı tarayıcının solundan "iter".

Sevmek:

Temel olarak herhangi bir web sayfasının 3 sütun düzeninde "Ana Gövde" "Merkez" de ve "Mobil" görünümünde "Ana Gövde" sayfanın "Üst" kısmında görünür. Bu çoğunlukla 3 sütun düzenine sahip herkes tarafından istenir.

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

Buradan görüntüleyebilirsiniz: http://jsfiddle.net/DrGeneral/BxaNN/1/

Umarım yardımcı olur

Yanlış anlama Sütun sıralaması ile ilgili yaygın yanlış anlama, mobil cihazlarda itme ve çekme işlemlerini yapmam (veya yapabilmem) ve masaüstü görünümlerinin işaretlemenin doğal sırasına göre oluşturulması gerektiğidir. Bu yanlış.

Reality Bootstrap mobil bir ilk çerçevedir. Bu, HTML işaretlemenizdeki sütunların sırasının, mobil cihazlarda gösterilmesini istediğiniz sırayı temsil etmesi gerektiği anlamına gelir. Bu, itme ve çekme işlemlerinin daha büyük masaüstü görünümlerinde yapıldığı anlamına gelir. mobil cihaz görünümünde değil ..

Brandon Schmalz - Full Stack Web Developer Burada tam açıklamaya bir göz atın

Ben sadece bu 2 iyi cevap 0.2 $ benim eklemek gibi hissettim. 3 sütunlu bir durumda son sütunu en üste taşımak zorunda kaldığım bir durum vardı.

[ABC]

için

[C]

[A]

[B]

Boostrap'ın sınıfı .col-xx-push-Xbaşka bir şey yapmaz, ancak bir sütunu sağa doğru iter, left: XX%; bu yüzden bir sütunu sağa itmek için yapmanız gereken tek şey soldaki sahte sütun sayısını eklemektir.

Bu durumda:

• iki sütun ( col-md-5ve col-md-3) sola gidiyor, her biri sağa giden değere sahip;

• biri ( col-md-4) sola giden ilk ikisinin toplamı ile sağa gidiyor (5 + 3 = 8);

<div class="row">
    <div class="col-md-4 col-md-push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

Verileri, görüntü alanı boyutuna bağlı olarak 1/2/4 sütunlarında düzenlemeniz gerekiyorsa, itme ve çekme seçeneği olmayabilir. İlk etapta öğelerinizi nasıl sipariş ederseniz edin, boyutlardan biri size yanlış bir sipariş verebilir.

Bu durumda bir çözüm, herhangi bir itme veya çekme sınıfı olmadan iç içe satırları ve sütunları kullanmaktır.

Misal

İstediğiniz XS'de ...

A
B
C
D
E
F
G
H

SM'de istediğiniz ...

A   E
B   F
C   G
D   H

MD ve üzeri istediğiniz ...

A   C   E   G
B   D   F   H

Çözüm

Çevreleyen iki sütunlu bir üst öğede iç içe iki sütunlu alt öğeler kullanın:

İşte çalışan bir snippet:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>

Bu çözümün bir başka güzelliği, öğelerin kodda doğal düzeninde (A, B, C, ... H) görünmesi ve karıştırılması gerekmemesidir, bu da CMS üretimi için güzeldir.