Làm cách nào để định vị các phần tử bằng Bootstrap?

Thuộc tính

...

4 ảnh hưởng đến vị trí thẳng đứng của phần tử được định vị. Thuộc tính này không ảnh hưởng đến các phần tử không được định vị

  • Nếu vị trí. tuyệt đối; . đã sửa;
  • Nếu vị trí. liên quan đến;
  • Nếu vị trí. nếp;
  • Nếu vị trí. tĩnh;

Đưa ra bản chạy thử ❯


Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính

BĐSbottom1. 05. 01. 01. 06. 0



Cú pháp CSS

đáy. tự động. chiều dài. ban đầu. thừa kế;

Giá trị tài sản

ValueDescriptionDemoautoCho phép trình duyệt tính toán vị trí cạnh dưới. Đây là mặc địnhDemo ❯lengthĐặt vị trí cạnh dưới theo px, cm, v.v. Cho phép giá trị âm. Đọc về đơn vị độ dàiDemo ❯%Đặt vị trí cạnh dưới theo % của phần tử chứa. Giá trị âm được phépDemo ❯initialĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế

Định vị một phần tử ở trên cùng của khung nhìn, từ cạnh này sang cạnh khác. Hãy chắc chắn rằng bạn hiểu sự phân nhánh của vị trí cố định trong dự án của bạn;

...

Đáy cố định

Định vị một phần tử ở dưới cùng của khung nhìn, từ cạnh này sang cạnh khác. Hãy chắc chắn rằng bạn hiểu sự phân nhánh của vị trí cố định trong dự án của bạn;

...

đầu dính

Định vị một phần tử ở trên cùng của khung nhìn, từ cạnh này sang cạnh khác, nhưng chỉ sau khi bạn cuộn qua nó. Tiện ích

...

0 sử dụng

...

1 của CSS, không được hỗ trợ đầy đủ trong tất cả các trình duyệt

...

Đầu dính đáp ứng

Các biến thể đáp ứng cũng tồn tại cho tiện ích

...

0

Stick to the top on viewports sized SM (small) or wider

Stick to the top on viewports sized MD (medium) or wider

Stick to the top on viewports sized LG (large) or wider

Stick to the top on viewports sized XL (extra-large) or wider

Giá trị vị trí

Các lớp định vị nhanh có sẵn, mặc dù chúng không đáp ứng

...

...

...

...

...

sắp xếp các yếu tố

Sắp xếp các yếu tố dễ dàng với các tiện ích định vị cạnh. Định dạng là

...

3

Trường hợp tài sản là một trong

  • ...

    4 - cho vị trí

    ...

    4 dọc
  • ...

    6 - đối với vị trí

    ...

    7 nằm ngang (tính bằng LTR)
  • ...

    8 - cho vị trí

    ...

    8 dọc
  • ...

    0 - đối với vị trí

    ...

    1 nằm ngang (tính bằng LTR)

Trong đó vị trí là một trong những

  • ...

    2 - cho vị trí cạnh

    ...

    2
  • ...

    4 - cho vị trí cạnh

    ...

    5
  • ...

    6 - cho vị trí cạnh

    ...

    7

(Bạn có thể thêm nhiều giá trị vị trí hơn bằng cách thêm các mục vào biến bản đồ

...

8 Sass. )

...

4

yếu tố trung tâm

Ngoài ra, bạn cũng có thể căn giữa các phần tử với lớp tiện ích biến đổi

...

9

Lớp này áp dụng các phép biến đổi

Stick to the top on viewports sized SM (small) or wider

Stick to the top on viewports sized MD (medium) or wider

Stick to the top on viewports sized LG (large) or wider

Stick to the top on viewports sized XL (extra-large) or wider

0 và

Stick to the top on viewports sized SM (small) or wider

Stick to the top on viewports sized MD (medium) or wider

Stick to the top on viewports sized LG (large) or wider

Stick to the top on viewports sized XL (extra-large) or wider

1 cho phần tử, kết hợp với các tiện ích định vị cạnh, cho phép bạn căn giữa một phần tử một cách tuyệt đối

...

8

Bằng cách thêm các lớp

Stick to the top on viewports sized SM (small) or wider

Stick to the top on viewports sized MD (medium) or wider

Stick to the top on viewports sized LG (large) or wider

Stick to the top on viewports sized XL (extra-large) or wider

2 hoặc

Stick to the top on viewports sized SM (small) or wider

Stick to the top on viewports sized MD (medium) or wider

Stick to the top on viewports sized LG (large) or wider

Stick to the top on viewports sized XL (extra-large) or wider

3, các phần tử chỉ có thể được định vị theo hướng ngang hoặc dọc

...

8

ví dụ

Dưới đây là một số ví dụ thực tế về các lớp này

Thư +99 tin nhắn chưa đọc Đánh dấu Cảnh báo tin nhắn chưa đọc

...

2

Bạn có thể sử dụng các lớp này với các thành phần hiện có để tạo các lớp mới. Hãy nhớ rằng bạn có thể mở rộng chức năng của nó bằng cách thêm các mục vào biến

...

8

Các phần tử được định vị như thế nào?

Phần tử được định vị theo quy trình bình thường của tài liệu , sau đó được dịch chuyển so với tổ tiên cuộn gần nhất và khối chứa (gần nhất .

Làm cách nào để đặt vị trí nút trong Bootstrap?

Định dạng là {property}-{position}. .
top - cho vị trí trên cùng theo chiều dọc
bắt đầu - cho vị trí nằm ngang bên trái (tính bằng LTR)
đáy - cho vị trí đáy thẳng đứng
kết thúc - cho vị trí nằm ngang bên phải (trong LTR)

Các cách khác nhau để định vị các phần tử trên một trang là gì?

Mỗi ví dụ sẽ khai báo các kiểu CSS khác nhau cho bên ngoài và bên trong. .
2. 1 Định vị 'Tuyệt đối'. .
2. 2 Định vị 'Tương đối'. .
2. 3 Định vị 'Tuyệt đối' so với dòng chảy. .
2. 4 Định vị tĩnh. .
2. 5 yếu tố nổi. .
2. 6 Khả năng hiển thị. .
2. 7 thứ tự Z. .
2. 8 'tràn'