其实就是一个层次关系，就像“回”字，口里面嵌套了一个口字。

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">我是大漠</h4>
        <div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
            </a>
            <div class="media-body">
                <h4 class="media-heading">慕课网</h4>
                <div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">W3cplus</h4>
                        <div>W3cplus站上还有很多教程....</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>