Bootstrap/docs/4.5/components/media-object
来自菜鸟教程
媒体对象
Bootstrap媒体对象的文档和示例,用于构建高度重复的组件,例如博客评论,推文等。
例
The 媒体对象 有助于构建复杂且重复的组件,其中某些媒体会放置在不会环绕所述媒体的内容旁边。 另外,由于使用了flexbox,它仅用两个必需的类就可以做到这一点。
以下是单个媒体对象的示例。 只需要两个类-包装 .media 和 .media-body 围绕您的内容。 可以通过以下方式控制可选的填充和边距 间隔实用程序 .
媒体标题
Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。<div class="media">
<svg aria-label="Placeholder: 64x64" class="bd-placeholder-img mr-3" focusable="false" height="64" preserveaspectratio="xMidYMid slice" role="img" width="64" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 64x64 </text></svg>
<div class="media-body">
<h5 class="mt-0"> 媒体标题 </h5> Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。 </div>
</div>Flexbug#12：内联元素不被视为flex项目
Internet Explorer 10-11不会呈现链接或图像（或 ::before and ::after 伪元素）作为弹性项目。 唯一的解决方法是设置非内联 display 价值（例如, block,inline-block , or flex ). 我们建议使用 .d-flex ,我们的其中之一 显示工具 ,作为一种简单的解决方法。
资源： GitHub上的Flexbugs
套料
媒体对象可以无限嵌套,尽管我们建议您在某个时候停止。 嵌套的地方 .media 在 .media-body 父媒体对象。
媒体标题
Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。<div class="media">
<svg aria-label="Placeholder: 64x64" class="bd-placeholder-img mr-3" focusable="false" height="64" preserveaspectratio="xMidYMid slice" role="img" width="64" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 64x64 </text></svg>
<div class="media-body">
<h5 class="mt-0"> 媒体标题 </h5> Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。 <div class="media mt-3">
<a class="mr-3" href="#">
<svg aria-label="Placeholder: 64x64" class="bd-placeholder-img" focusable="false" height="64" preserveaspectratio="xMidYMid slice" role="img" width="64" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 64x64 </text></svg>
</a>
<div class="media-body">
<h5 class="mt-0"> 媒体标题 </h5> Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。 </div>
</div>
</div>
</div>对准
媒体对象中的媒体可以使用flexbox实用程序对齐到您的顶部（默认）,中间或结尾 .media-body 内容。
最上层的媒体
Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。
Donec sed odio dui。 Nullam quis risus eget urna mollis ornare vel eu leo。 Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus。
<div class="media">
<svg aria-label="Placeholder: 64x64" class="bd-placeholder-img align-self-start mr-3" focusable="false" height="64" preserveaspectratio="xMidYMid slice" role="img" width="64" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 64x64 </text></svg>
<div class="media-body">
<h5 class="mt-0"> 最上层的媒体 </h5>
<p> Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。 </p>
<p> Donec sed odio dui。 Nullam quis risus eget urna mollis ornare vel eu leo。 Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus。 </p>
</div>
</div>居中对齐的媒体
Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。
Donec sed odio dui。 Nullam quis risus eget urna mollis ornare vel eu leo。 Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus。
<div class="media">
<svg aria-label="Placeholder: 64x64" class="bd-placeholder-img align-self-center mr-3" focusable="false" height="64" preserveaspectratio="xMidYMid slice" role="img" width="64" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 64x64 </text></svg>
<div class="media-body">
<h5 class="mt-0"> 居中对齐的媒体 </h5>
<p> Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。 </p>
<p class="mb-0"> Donec sed odio dui。 Nullam quis risus eget urna mollis ornare vel eu leo。 Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus。 </p>
</div>
</div>底部对齐的媒体
Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。
Donec sed odio dui。 Nullam quis risus eget urna mollis ornare vel eu leo。 Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus。
<div class="media">
<svg aria-label="Placeholder: 64x64" class="bd-placeholder-img align-self-end mr-3" focusable="false" height="64" preserveaspectratio="xMidYMid slice" role="img" width="64" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 64x64 </text></svg>
<div class="media-body">
<h5 class="mt-0"> 底部对齐的媒体 </h5>
<p> Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。 </p>
<p class="mb-0"> Donec sed odio dui。 Nullam quis risus eget urna mollis ornare vel eu leo。 Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus。 </p>
</div>
</div>订购
通过修改HTML本身或添加一些自定义的flexbox CSS来设置媒体对象的内容顺序,以更改媒体对象中的内容顺序 order 属性（选择的整数）。
媒体对象
Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1"> 媒体对象 </h5> Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。 </div>
<svg aria-label="Placeholder: 64x64" class="bd-placeholder-img ml-3" focusable="false" height="64" preserveaspectratio="xMidYMid slice" role="img" width="64" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 64x64 </text></svg>
</div>媒体清单
由于媒体对象的结构要求很少,因此您也可以在列表HTML元素上使用这些类。 在你的 <ul> or <ol> ,添加 .list-unstyled 删除任何浏览器默认列表样式,然后应用 .media 到你的 <li> s. 与往常一样,在需要进行微调的地方使用间距实用程序。
-
基于列表的媒体对象
Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。 -
基于列表的媒体对象
Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。 -
基于列表的媒体对象
Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。
<ul class="list-unstyled">
<li class="media">
<svg aria-label="Placeholder: 64x64" class="bd-placeholder-img mr-3" focusable="false" height="64" preserveaspectratio="xMidYMid slice" role="img" width="64" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 64x64 </text></svg>
<div class="media-body">
<h5 class="mt-0 mb-1"> 基于列表的媒体对象 </h5> Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。 </div>
</li>
<li class="media my-4">
<svg aria-label="Placeholder: 64x64" class="bd-placeholder-img mr-3" focusable="false" height="64" preserveaspectratio="xMidYMid slice" role="img" width="64" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 64x64 </text></svg>
<div class="media-body">
<h5 class="mt-0 mb-1"> 基于列表的媒体对象 </h5> Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。 </div>
</li>
<li class="media">
<svg aria-label="Placeholder: 64x64" class="bd-placeholder-img mr-3" focusable="false" height="64" preserveaspectratio="xMidYMid slice" role="img" width="64" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 64x64 </text></svg>
<div class="media-body">
<h5 class="mt-0 mb-1"> 基于列表的媒体对象 </h5> Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。 </div>
</li>
</ul>