Đối tượng phương tiện Bootstrap 4

Đối tượng phương tiện

Bootstrap cung cấp một cách dễ dàng để căn chỉnh các đối tượng phương tiện (như hình ảnh hoặc video) cùng với nội dung. Các đối tượng phương tiện thường được sử dụng để hiển thị các bình luận blog, tweet, v.v.

John Doe Đăng vào ngày 19 tháng 2 năm 2016

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

John Doe Đăng vào ngày 20 tháng 2 năm 2016

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

Đối tượng phương tiện cơ bản

John Doe Đăng vào ngày 19 tháng 2 năm 2016

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

Để tạo một đối tượng phương tiện, hãy thêm .medialớp vào phần tử vùng chứa và đặt nội dung phương tiện bên trong vùng chứa con với .media-bodylớp đó. Thêm đệm và lề nếu cần, với các tiện ích giãn cách:

Đối tượng phương tiện lồng nhau

Các đối tượng media cũng có thể được lồng vào nhau (một đối tượng media bên trong đối tượng media):

John Doe Đăng vào ngày 19 tháng 2 năm 2016

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

Jane Doe Đã đăng vào ngày 20 tháng 2 năm 2016

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

Để lồng các đối tượng phương tiện, hãy đặt một vùng .mediachứa mới bên trong vùng .media-bodychứa:

Hình ảnh phương tiện được căn chỉnh bên phải

John Doe Đăng vào ngày 19 tháng 2 năm 2016

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

Để căn phải hình ảnh phương tiện, hãy thêm hình ảnh sau vùng .media-bodychứa:

Căn chỉnh trên cùng, giữa hoặc dưới cùng

Sử dụng các lớp, tiện ích flex align-self-*để đặt đối tượng media ở trên cùng, giữa hoặc ở dưới cùng:

Phương tiện hàng đầu

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

---

Phương tiện Trung gian

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

---

Phần dưới Phương tiện

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.