Pull - Push trong Bootstrap

#1

Xin chào mọi người.

Mọi người cho mình hỏi cách sử dụng pull - push trong Bootstrap thế nào để ở trong ví dụ này, khi ở kích thước màn hình : col-xs tức là <= 768 px thì cột Right của mình nhảy lên nằm bên phải cột left được ạ.

Mình xin cám ơn !

https://codepen.io/Hoangvan/pen/qpOQaV

#2

Mình comment lại cho lên Top. Bạn nào đọc được bài xin bày cách giúp mình ạ

#3

Grid của bootstrap là 12 cột.
Vậy nên bạn chỉnh col-xs-number sao cho tổng lại là 12 (hoặc nhỏ hơn) là được.
Vd:

<div class="container">
  <div class="left col-sm-3 col-xs-4">
      Left
  </div>
  <div class="main col-sm-6 col-xs-4">
      Main
  </div>
  <div class="right col-sm-3 col-xs-4">
      Right
  </div>
</div>
2 Likes
#4

cám ơn bạn nhưng mà hình như bạn hiểu sai ý của mình rồi ạ

1 Like
#5

Ặc, đúng thật, mình đọc ẩu đoảng quá. xin lỗi bạn nhé :sweat_smile:

3 Likes
#6

Ý bạn là như thế này đúng không :?

Mình có thử với tổng ko = 12 thì nó sẽ không đưa lên được

<div class="container">
  <div class="left col-sm-3 col-xs-1">
      Left
  </div>
  <div class="main col-sm-6 col-xs-5 col-xs-push-6">
      Main
  </div>
  <div class="right col-sm-3 col-xs-6 col-xs-pull-5">
      Right
  </div>
</div>
2 Likes
#7

Ý mình là với:

Màn hình kích thước từ col-lg đến col- sm tức là >= 768px thì 3 cột sẽ nằm thành 1 hàng theo thứ tự

Left      -   Main    -   Right
<col-3>   -  <col-6>  -  <col-3>

Trong đó 2 div Left và Right chiếm 3 cột, div Main chiếm 6 cột.

Khi co về màn hình kích thước col-xs <768px thì thứ tự nó sẽ là:

Left   < col-6>
Main   <col-12>
Right  <col-6>

Trong đó 2 div Left và Right chiếm 6 cột, div Main chiếm 12 cột.

Nhưng nó lại nằm thành 3 hàng và hàng 1 với hàng 3 lại bị thừa khoảng trống (vì dùng hết có 6 cột) , giờ mình muốn gom 2 div 6 cột lại để chúng nằm thành 1 hàng tức là muốn đổi chỗ Right cho Main

Vậy thực sự là không có cách nào hả bạn ?

#8

Nếu dùng thuần boootstrap thì mình không rành lắm, nên mong cao nhân bootstrap thôi :smiley:
Tuy nhiên ko dùng bootstrap 100% thì mình vẫn có cách:
https://codepen.io/anon/pen/xpweqQ

3 Likes
#9

Push => đẩy cột sang bên phải
Pull => kéo cột về bên trái
Chỉ có trái, phải thôi không có up, down.

Nên bạn làm theo hướng cho 3 cột theo thứ tự left, right, main => ở kích thước col-sm thì đẩy cột right sang phải tức là ra ngoài cùng và kéo cột center sang trái tức là vào giữa. Còn ở kích thước col-xs nó hiển thị theo mặc định.

<div class="row">
    <div class="col-sm-3 col-xs-6">
        <div class="well">Left</div>
    </div>
    <div class="col-sm-3 col-sm-push-6 col-xs-6">
        <div class="well">Right</div>
    </div>
    <div class="col-sm-6 col-sm-pull-3 col-xs-12">
        <div class="well">Main</div>
    </div>
</div>

Demo:

Note:

Bootstrap is a mobile first framework. This means that the order of the columns in your HTML markup should represent the order in which you want them displayed on mobile devices. This would also mean that the pushing and pulling is done on the larger desktop views.

http://www.schmalz.io/2014/10/08/Column-Ordering-in-Bootstrap/

4 Likes
#10

Cám ơn hai bạn @drgnz và @it-4-life nhiều ạ.
Chúc các bạn buổi tối cuối tuần vui vẻ.

#11

Bạn cũng có thể dùng Grid trong Css để giải quyết trong trường hợp này. Xem Demo nhé :

2 Likes
#12

Cám ơn bạn Giang nhiều nhé …

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?