Bây giờ tôi đang đọc tài liệu trên Twitter Bootstrap 3 và đã cố gắng thực hiện theo thứ tự cột như được hiển thị trong trang này nhưng đã chạm tường. Tôi không hiểu tại sao một mã như vậy hoạt động cũng như làm thế nào để xác định chính xác cài đặt. Những gì tôi muốn hiển thị là một lưới, bao gồm chiều dài 5 và chiều dài 5 khác, và cuối cùng là một lưới 2 chiều dài.

Vì vậy, của tôi là một cái gì đó như thế này:

[5] [5] [2]

Và điều tôi muốn đạt được là, khi nó được xem trên Desktop, bố cục ở trên được hiển thị, nhưng khi nó được xem trên thiết bị di động, tôi muốn hiển thị đối tượng 5 chiều dài thứ hai trước, sau đó là đối tượng 5 chiều dài đầu tiên và cuối cùng là đối tượng 2 chiều dài , theo chiều dọc. Như thế này:

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

Trong khi tôi cố gắng làm theo bước được giải thích trong tài liệu trên, tôi đã nhận được đối tượng có độ dài 5 đầu tiên so với đối tượng thứ hai mặc dù trên nền tảng di động, như tôi đã nói sẽ hiển thị đối tượng 5 chiều dài thứ hai ở trên cùng. Nói cách khác, tôi đã nhận được điều này:

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

Vì vậy, làm thế nào tôi có thể đặt chính xác thứ hai trên đầu tiên? Hoặc vì tôi sử dụng cùng một đối tượng, nên thứ tự cột có thể không hoạt động không?

Đây là mã của tôi cho thông tin của bạn:

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

Ngoài ra, tài liệu không làm rõ những gì pullhoặc pushphương tiện. Vì vậy, tôi đang thiếu một cái gì đó?

Cảm ơn.

Câu trả lời này gồm ba phần, xem bên dưới để biết bản phát hành chính thức (v3 và v4)

Tôi thậm chí không thể tìm thấy các lớp col-lg-push-x hoặc pull trong các tệp gốc cho RC1 tôi đã tải xuống, vì vậy hãy kiểm tra tệp bootstrap.css của bạn. hy vọng đây là thứ họ sẽ sắp xếp trong RC2.

Dù sao, lớp col-đẩy- * và pull đã tồn tại và điều này sẽ phù hợp với nhu cầu của bạn. Đây là một bản 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>

EDIT: DƯỚI ĐÂY LÀ TRẢ LỜI CHO VIỆC LIÊN QUAN CHÍNH THỨC v3.0

Cũng xem bài viết blog này về chủ đề

• col-vp-push-x= đẩy cột sang phải theo x số cột, bắt đầu từ nơi cột thường hiển thị -> position: relative, trên cổng xem vp hoặc lớn hơn.

• col-vp-pull-x= kéo cột sang trái theo x số cột, bắt đầu từ nơi cột thường hiển thị -> position: relative, trên cổng xem vp hoặc lớn hơn.

  vp = xs, sm, md hoặc lg

  x = 1 đến 12

Tôi nghĩ điều khiến mọi người khó chịu nhất là bạn cần thay đổi thứ tự các cột trong đánh dấu HTML của bạn (trong ví dụ bên dưới, B xuất hiện trước A) và rằng nó chỉ thực hiện việc đẩy hoặc kéo các cổng xem lớn hơn hoặc bằng những gì đã được chỉ định. tức là col-sm-push-5sẽ chỉ đẩy 5 cột trên smcác cổng xem hoặc lớn hơn. Điều này là do Bootstrap là một khung "di động đầu tiên", do đó HTML của bạn sẽ phản ánh phiên bản di động của trang web của bạn. Đẩy và kéo sau đó được thực hiện trên màn hình lớn hơn.

• (Máy tính để bàn) Cổng xem lớn hơn được đẩy và kéo.
• (Di động) Cổng xem nhỏ hơn hiển thị theo thứ tự thông thường.

BẢN GIỚI THIỆU

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

Cổng xem> = sm

|A|B|C|

Cổng xem <sm

|B|
|A|
|C|

EDIT: DƯỚI ĐÂY LÀ TRẢ LỜI CHO v4.0

Với v4 đi kèm flexbox và các thay đổi khác đối với hệ thống lưới và các lớp đẩy \ pull đã được loại bỏ để sử dụng thứ tự flexbox.

• Sử dụng .order-*các lớp để kiểm soát thứ tự trực quan (trong đó * = 1 đến 12)
• Đây cũng có thể là lớp lưới cụ thể .order-md-*
• Ngoài ra .order-first(-1) và .order-last(13) có sẵn

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

Kéo "kéo" div về phía bên trái của trình duyệt và Đẩy "đẩy" div ra khỏi bên trái trình duyệt.

Giống:

Vì vậy, về cơ bản trong bố cục 3 cột của bất kỳ trang web nào, "Thân chính" xuất hiện ở "Trung tâm" và trong chế độ xem "Di động", "Thân chính" xuất hiện ở "Trên cùng" của trang. Điều này chủ yếu được mong muốn bởi tất cả mọi người với bố trí 3 cột.

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

Bạn có thể xem nó ở đây: http://jsfiddle.net/DrGeneral/BxaNN/1/

Hy vọng nó giúp

Quan niệm sai lầm Quan niệm sai lầm phổ biến với thứ tự cột là, tôi nên (hoặc có thể) thực hiện việc đẩy và kéo trên thiết bị di động và các chế độ xem trên máy tính để bàn sẽ hiển thị theo thứ tự tự nhiên của đánh dấu. Cái này sai.

Thực tế Bootstrap là một khung di động đầu tiên. Điều này có nghĩa là thứ tự các cột trong đánh dấu HTML của bạn phải thể hiện thứ tự mà bạn muốn chúng được hiển thị trên thiết bị di động. Điều này có nghĩa là việc đẩy và kéo được thực hiện trên các giao diện máy tính để bàn lớn hơn. không phải trên thiết bị di động xem ..

Brandon Schmalz - Nhà phát triển web Full Stack Hãy xem mô tả đầy đủ tại đây

Tôi chỉ cảm thấy như tôi sẽ thêm $ 0,2 của mình vào 2 câu trả lời hay đó. Tôi đã có một trường hợp khi tôi phải di chuyển cột cuối cùng lên đỉnh trong tình huống 3 cột.

[A] [B] [C]

đến

[C]

[A]

[B]

Lớp của Boostrap .col-xx-push-Xkhông làm gì khác ngoài việc đẩy một cột sang bên phải, left: XX%; vì vậy tất cả những gì bạn phải làm để đẩy một cột bên phải là thêm số cột giả sang trái.

Trong trường hợp này:

• hai cột ( col-md-5và col-md-3) đang đi bên trái, mỗi cột có giá trị của cột bên phải;

• một ( col-md-4) đi bên phải bằng tổng của hai đầu tiên bên trái (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>

Nếu bạn cần sắp xếp dữ liệu theo các cột 1/2 / 4 tùy thuộc vào kích thước khung nhìn thì đẩy và kéo có thể không có tùy chọn nào cả. Cho dù bạn đặt hàng ở đâu ngay từ đầu, một trong những kích cỡ có thể khiến bạn đặt hàng sai.

Một giải pháp trong trường hợp này là sử dụng các hàng và cols lồng nhau mà không có bất kỳ lớp đẩy hoặc kéo nào.

Thí dụ

Trong XS bạn muốn ...

A
B
C
D
E
F
G
H

Trong SM bạn muốn ...

A   E
B   F
C   G
D   H

Trong MD trở lên bạn muốn ...

A   C   E   G
B   D   F   H

Giải pháp

Sử dụng các phần tử con hai cột lồng nhau trong phần tử cha hai cột xung quanh:

Đây là một đoạn làm việc:

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

Một nét đẹp khác của giải pháp này là, các mục xuất hiện trong mã theo thứ tự tự nhiên của chúng (A, B, C, ... H) và không phải xáo trộn, điều này rất tốt cho thế hệ CMS.