bootstrap media 图文

image.png

<div class="container">
<div class="row" style="width:500px">
<div class="media">
<a href="#" class="media-left media-middle media-bottom">
<img src="user_photo.png" width="100"/>
</a>
<div class="media-body">
<h4 class="media-heading">java学院</h4>
<p>javajavajavajavajavajavajavajavajava
javajavajavajavajavajavajavajavajava
</p>
</div>
</div>
</div>

<div class="row" style="width:500px">
<div class="media">
<div class="media-body">
<h4 class="media-heading">java学院</h4>
<p>javajavajavajavajavajavajavajavajava
javajavajavajavajavajavajavajavajava
</p>
</div>
<a href="#" class="media-right">
<img src="user_photo.png" width="100"/>
</a>
</div>
</div>

<!-- 左右都有图片-->
<div class="row" style="width:500px">
    <div class="media">
        <a href="#" class="media-left">
            <img src="user_photo.png" width="100"/>
        </a>
        <div class="media-body">
            <h4 class="media-heading">java学院</h4>
            <p>javajavajavajavajavajavajavajavajava
                javajavajavajavajavajavajavajavajava
            </p>
        </div>
        <a href="#" class="media-right">
            <img src="user_photo.png" width="100"/>
        </a>
    </div>
</div>

<!-- 类似留言引用 右侧内容又嵌套了一个media-->
<div class="row" style="width:500px">
    <div class="media">
        <a href="#" class="media-left">
            <img src="user_photo.png" width="100"/>
        </a>
        <div class="media-body">
            <h4 class="media-heading">java学院</h4>
            <p>javajavajavajavajavajavajavajavajava
                javajavajavajavajavajavajavajavajava
            </p>
            <div class="media">
                <a href="#" class="media-left">
                    <img src="user_photo.png" width="100"/>
                </a>
                <div class="media-body">
                    <h4 class="media-heading">java学院</h4>
                    <p>javajavajavajavajavajavajavajavajava
                        javajavajavajavajavajavajavajavajava
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

</div>