关于 bootstrap <media object>变迁
media 组件是一个很常用的bootstrap组件 官方的用途解释为：
?
?3.x 的html结构如下：
3.x布局方式 使用的是 display table-cell
?
4.x 的结构有些变化 变得更灵活 也更高端（IE10+）
4.x使用 display flex 布局
?
?使用 display grid 来实现一个media object（grid 传送门 点我）
?
css
?
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等高度重复的组件
?3.x 的html结构如下：
3.x布局方式 使用的是 display table-cell
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
<ul class="media-list">3.x 传送门??点我
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
?
4.x 的结构有些变化 变得更灵活 也更高端（IE10+）
4.x使用 display flex 布局
<div class="media">
<img class="align-self-center mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in 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>
<ul class="list-unstyled">4.x 传送门 点我
<li class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>
?
关于object 左右的问题 3.x 和4.x 都可以通过对 object流位置进行调整来进行，但4.x还可以通过 设置对应order来直接替换? 关于bootstrap4.x的flex 设置 点我
?使用 display grid 来实现一个media object（grid 传送门 点我）
?
css
.media {
display: grid;
grid-template-rows: repeat(2, auto);
grid-template-columns: 25% calc(~"75% - 1.25rem");
grid-auto-rows: auto;
grid-template-areas: "object content" "object footer";
grid-gap: 0 1.25rem;
.object {
grid-row: 1 / span 2;
grid-column: 1;
}
.content {
grid-row: 1;
grid-column: 2;
}
.footer {
grid-row: 2;
grid-column: 2;
align-self: flex-end;
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
