<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：嵌套的媒体对象</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div style="padding:20px">
<ul class="media-list">
<li class="media">
<a href="#" class="pull-left"><img class="media-object" src="Images/logo.png" alt="媒体对象" /></a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
<p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
<div class="media">
<a href="#" class="pull-left"><img src="Images/logo.png" alt="媒体对象" /></a>
<div class="media-body">
<h4 class="media-heading">嵌套的媒体标题</h4>
<p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
<div class="media">
<a href="#" class="pull-left"><img src="Images/logo.png" alt="媒体对象" /></a>
<div class="media-body">
<h4 class="media-heading">嵌套的媒体标题</h4>
<p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
</div>
</div>
</div>
</div>
<div class="media">
<a href="#" class="pull-left"><img src="Images/logo.png" alt="媒体对象" /></a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
<p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
</div>
</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left"><img src="Images/logo.png" alt="媒体对象" /></a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
<p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
</div>
</liclass="media">
</ul>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
来源：https://www.cnblogs.com/melao2006/p/5001531.html