ตอนนี้ฉันกำลังอ่านเอกสารบน Twitter Bootstrap 3 และพยายามติดตามการสั่งซื้อคอลัมน์ตามที่แสดงใน หน้านี้ แต่กดกำแพง ฉันไม่เข้าใจว่าเพราะเหตุใดรหัสดังกล่าวจึงทำงานไม่ได้และวิธีระบุการตั้งค่าอย่างถูกต้อง สิ่งที่ฉันต้องการแสดงคือหนึ่งตารางซึ่งประกอบด้วยความยาว 5 และอีก 5 ความยาวและสุดท้ายหนึ่งความยาว 2 ตาราง

ดังนั้นของฉันเป็นแบบนี้:

[5] [5] [2]

และสิ่งที่ฉันต้องการบรรลุคือเมื่อมันดูบนเดสก์ท็อปเค้าโครงด้านบนจะปรากฏขึ้น แต่เมื่อมันดูบนมือถือฉันต้องการแสดงวัตถุที่มีความยาว 5 อันดับที่สองก่อนจากนั้นจึงเป็นวัตถุที่มีความยาว 5 อันดับแรก ในแนวตั้ง แบบนี้:

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

ในขณะที่ฉันพยายามทำตามขั้นตอนที่อธิบายไว้ในเอกสารด้านบนฉันได้วัตถุยาว 5 ตัวแรกจากวัตถุที่สองแม้ว่าจะอยู่บนแพลตฟอร์มมือถือซึ่งดังที่ฉันบอกว่าควรแสดงวัตถุ 5 ความยาวที่สองที่ด้านบน ในคำอื่น ๆ ฉันได้รับนี้:

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

แล้วฉันจะวางอันที่สองให้ถูกต้องก่อนได้อย่างไร? หรือเนื่องจากฉันใช้วัตถุที่มีความยาวเท่ากันคอลัมน์ที่สั่งซื้ออาจไม่ทำงานหรือไม่

นี่คือรหัสของฉันสำหรับข้อมูลของคุณ:

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

นอกจากนี้เอกสารไม่ได้อธิบายถึงความหมายpullหรือความpushหมาย ดังนั้นฉันจึงขาดอะไรไป

ขอบคุณ

คำตอบนี้อยู่ในสามส่วนดูด้านล่างสำหรับการเปิดตัวอย่างเป็นทางการ (v3 และ v4)

ฉันไม่พบแม้แต่ col-lg-push-x หรือ pull class ในไฟล์ต้นฉบับสำหรับ RC1 ที่ฉันดาวน์โหลดดังนั้นตรวจสอบไฟล์ bootstrap.css ของคุณ หวังว่านี่คือสิ่งที่พวกเขาจะจัดเรียงใน RC2

ยังไงก็ตาม col-push- * และ pull classes มีอยู่แล้วและนี่จะเหมาะกับความต้องการของคุณ นี่คือตัวอย่าง

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

แก้ไข: ด้านล่างนี้เป็นคำตอบสำหรับ v3.0 ที่เป็นทางการ

ดูโพสต์บล็อกนี้ในเรื่อง

• col-vp-push-x= ดันคอลัมน์ไปทางขวาตามจำนวนคอลัมน์xโดยเริ่มจากตำแหน่งที่คอลัมน์จะแสดง -> position: relativeบนvpหรือ view-port ที่ใหญ่กว่าปกติ

• col-vp-pull-x= ดึงคอลัมน์ไปทางซ้ายตามจำนวนคอลัมน์xโดยเริ่มต้นจากที่คอลัมน์จะแสดงผลตามปกติ -> position: relativeบนvpหรือ view-port ที่ใหญ่กว่า

  vp = xs, sm, md หรือ lg

  x = 1 ถึง 12

ฉันคิดว่าสิ่งที่คนส่วนใหญ่ยุ่งคือคุณต้องเปลี่ยนลำดับของคอลัมน์ในมาร์กอัป HTML ของคุณ (ในตัวอย่างด้านล่าง B มาก่อน A)และมันผลักหรือดึงพอร์ตวิวที่มี มากกว่าหรือเท่ากับสิ่งที่ระบุ ie col-sm-push-5จะผลักดันเพียง 5 คอลัมน์ในsmวิวพอร์ตหรือมากกว่า นี่เป็นเพราะ Bootstrap เป็นเฟรมเวิร์กที่ "เป็นมือถืออันดับแรก" ดังนั้น HTML ของคุณควรแสดงถึงเวอร์ชันมือถือของไซต์ของคุณ จากนั้นจะทำการผลักและดึงบนหน้าจอที่ใหญ่ขึ้น

• (เดสก์ท็อป) พอร์ตมุมมองที่ใหญ่กว่าถูกผลักและดึง
• (มือถือ) พอร์ตการดูที่เล็กกว่าจะแสดงผลตามลำดับปกติ

การสาธิต

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

View-port <sm

|B|
|A|
|C|

แก้ไข: ด้านล่างนี้เป็นคำตอบสำหรับ v4.0

ด้วย v4 มาพร้อม flexbox และการเปลี่ยนแปลงอื่น ๆ ในระบบกริดและคลาส push \ pull ได้ถูกลบออกไปโดยใช้การสั่ง flexbox

• ใช้.order-*คลาสเพื่อควบคุมลำดับภาพ (โดยที่ * = 1 ถึง 12)
• นี่อาจเป็นตารางระดับเฉพาะ .order-md-*
• นอกจากนี้ยังมี.order-first(-1) และ.order-last(13)

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

ดึง "ดึง" div ไปทางซ้ายของเบราว์เซอร์และกด "ดัน" div ออกจากด้านซ้ายของเบราว์เซอร์

ชอบ:

ดังนั้นโดยทั่วไปในเลย์เอาต์ 3 คอลัมน์ของหน้าเว็บใด ๆ "ตัวถังหลัก" จะปรากฏขึ้นที่ "ศูนย์กลาง" และในมุมมอง "มือถือ" จะปรากฏ "ลำตัวหลัก" ที่ด้านบนสุดของหน้า ทุกคนต้องการรูปแบบคอลัมน์นี้เป็นส่วนใหญ่

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

คุณสามารถดูได้ที่นี่: http://jsfiddle.net/DrGeneral/BxaNN/1/

หวังว่ามันจะช่วย

ความเข้าใจผิดความเข้าใจผิด ทั่วไปที่มีการเรียงลำดับคอลัมน์คือฉันควร (หรือสามารถ) ทำการกดและดึงบนอุปกรณ์มือถือและมุมมองเดสก์ท็อปควรแสดงตามลำดับมาร์กอัปตามธรรมชาติ นี่เป็นสิ่งที่ผิด

Reality Bootstrap เป็นเฟรมเวิร์กแรกของมือถือ ซึ่งหมายความว่าลำดับของคอลัมน์ในมาร์กอัป HTML ของคุณควรแสดงลำดับที่คุณต้องการให้แสดงบนอุปกรณ์มือถือ ซึ่งหมายความว่าการกดและการดึงจะทำในมุมมองเดสก์ทอปที่ใหญ่ขึ้น ไม่ได้อยู่ในมุมมองอุปกรณ์มือถือ ..

Brandon Schmalz - นักพัฒนาเว็บเต็มกอง ดูคำอธิบายแบบเต็มได้ที่นี่

ฉันแค่รู้สึกว่าฉันจะเพิ่ม $ 0.2 ของฉันไปที่ 2 คำตอบที่ดี ฉันมีกรณีที่ฉันต้องย้ายคอลัมน์สุดท้ายไปจนสุดในสถานการณ์ 3 คอลัมน์

[A] [B] [C]

ถึง

[ค]

[A]

[b]

คลาสของ Boostrap .col-xx-push-Xไม่ได้ทำอะไรอย่างอื่นนอกจากผลักคอลัมน์ไปทางขวาด้วยleft: XX%; ดังนั้นสิ่งที่คุณต้องทำเพื่อผลักคอลัมน์ให้ถูกต้องคือการเพิ่มจำนวนคอลัมน์หลอกที่จะจากไป

ในกรณีนี้:

• คอลัมน์สองคอลัมน์ ( col-md-5และcol-md-3) จะเหลืออยู่โดยที่มูลค่าของคอลัมน์นั้นจะถูกต้อง

• one ( col-md-4) กำลังไปทางขวาโดยผลรวมของสองคนแรกที่เหลือ (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>

หากคุณต้องการจัดระเบียบข้อมูลในคอลัมน์ 1/2/4 ขึ้นอยู่กับขนาดวิวพอร์ตดังนั้นการกดและการดึงอาจไม่มีตัวเลือกเลย ไม่ว่าคุณจะสั่งซื้อสินค้าของคุณตั้งแต่แรกขนาดใดขนาดหนึ่งอาจทำให้คุณสั่งผิด

ทางออกในกรณีนี้คือการใช้แถวและ col ที่ซ้อนกันโดยไม่มีคลาส push หรือ pull ใด ๆ

ตัวอย่าง

ใน XS คุณต้องการ ...

A
B
C
D
E
F
G
H

ใน SM คุณต้องการ ...

A   E
B   F
C   G
D   H

ใน MD และสูงกว่าที่คุณต้องการ ...

A   C   E   G
B   D   F   H

สารละลาย

ใช้องค์ประกอบลูกสองคอลัมน์ซ้อนกันในองค์ประกอบหลักสองคอลัมน์โดยรอบ:

นี่คือตัวอย่างการทำงาน:

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

ความงามอีกวิธีหนึ่งของการแก้ปัญหานี้คือไอเท็มปรากฏในโค้ดตามลำดับธรรมชาติ (A, B, C, ... H) และไม่ต้องสับซึ่งเหมาะสำหรับการสร้าง CMS