Bootstrap媒体对象(例如图像或视频)可以以简单有效的方式在内容的左侧或右侧对齐。 Bootstrap媒体对象用于在内容旁边放置一些数据的地方,以构建内容的复杂和递归组件。
基本媒体对象:对容器元素使用.media类,并使用.media-body类将媒体内容放入子容器中。
例子:
Bootstrap Media Object
GeeksforGeeks
Media Object
GeeksforGeeks
Post published on 14th May, 2019
GeeksforGeeks is a computer science portal.
It is a best programming platform.
输出:
嵌套媒体对象:可以将媒体对象添加到媒体对象内部。它称为嵌套媒体对象。
例子:
Bootstrap Media Object
GeeksforGeeks
Nested Media Objects
GeeksforGeeks
Post published on 14th May, 2019
GeeksforGeeks is a computer science portal.
It is a best programming platform.
GeeksforGeeks
Post Modified on 15th May, 2019
GeeksforGeeks is a computer science portal.
It is a best programming platform.
输出:
右对齐媒体图像:在.media-body容器后添加图像以将图像设置为右对齐。
例子:
Bootstrap Media Object
GeeksforGeeks
Right-Aligned Media Objects
GeeksforGeeks
Post published on 14th May, 2019
GeeksforGeeks is a computer science portal.
It is a best programming platform.
输出:
顶部,中间和底部媒体对齐方式: .align-self- *类用于将媒体对象设置在元素的顶部,中间或底部。
例子:
Bootstrap Media Object
GeeksforGeeks
Top, Middle or Bottom Media Alignment
GeeksforGeeks
Post published on 14th May, 2019
GeeksforGeeks is a computer science portal.
It is a best programming platform. It contains
well written, well thought and well explained
computer science and programming articles,
quizzes and ...
GeeksforGeeks
Post published on 14th May, 2019
GeeksforGeeks is a computer science portal.
It is a best programming platform. It contains
well written, well thought and well explained
computer science and programming articles,
quizzes and ...
GeeksforGeeks
Post published on 14th May, 2019
GeeksforGeeks is a computer science portal.
It is a best programming platform. It contains
well written, well thought and well explained
computer science and programming articles,
quizzes and ...
输出: