ブートストラップ4メディアオブジェクト
メディアオブジェクト
Bootstrapは、メディアオブジェクト（画像やビデオなど）をコンテンツと一緒に整列させる簡単な方法を提供します。メディアオブジェクトは、ブログのコメントやツイートなどを表示するためによく使用されます。
JohnDoe投稿日：2016年2月19日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
JohnDoe投稿日：2016年2月20日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
基本的なメディアオブジェクト
JohnDoe投稿日：2016年2月19日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
メディアオブジェクトを作成するには、.mediaクラスをコンテナ要素に追加し、メディアコンテンツを.media-bodyクラスの子コンテナ内に配置します。必要に応じて、スペーシングユーティリティを使用してパディングとマージンを追加します。
例
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
ネストされたメディアオブジェクト
メディアオブジェクトはネストすることもできます（メディアオブジェクト内のメディアオブジェクト）：
JohnDoe投稿日：2016年2月19日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
JaneDoe投稿日：2016年2月20日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
メディアオブジェクトをネストするには、.mediaコンテナ内に新しいコンテナを配置します.media-body。
例
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
<div class="media p-3">
<img src="img_avatar2.png" alt="Jane
Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div
class="media-body">
<h4>Jane Doe <small><i>Posted on
February 20 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
右揃えのメディア画像
JohnDoe投稿日：2016年2月19日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
メディア画像を右揃えにするには、.media-bodyコンテナの後に画像を追加します。
例
<div class="media border p-3">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
<img src="img_avatar3.png" alt="John
Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
上、中、または下の配置
フレックスユーティリティ、align-self-*クラスを使用して、メディアオブジェクトを上、中央、または下に配置します。
メディアトップ
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
メディアミドル
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
メディアボトム
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
例
<!-- Media top -->
<div class="media">
<img src="img_avatar1.png" class="align-self-start
mr-3" style="width:60px">
<div class="media-body">
<h4>Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>