html - 如何正确对齐此 CSS？

Question

基本上，我正在尝试向个人资料图像添加填充，并在我的 Bootstrap 页面中如下所示对齐它。

这是当前的样子:

这是我希望它看起来的样子:

(注意用户名位于个人资料图片上方，评论文本位于下方但与个人资料图片对齐)

这是 HTML:(我是 Bootstrap 的新手)

    <div class="row">
        <div class="col-md-12">
            <img src="~/Images/avatar.png" class="profile-picture" />
            <label>Username - 1 month ago</label>
            <p>
                This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. 
            </p>
        </div>
    </div>

这是我的 CSS，它为个人资料图像添加了一些填充:

.profile-picture
{
    padding-left: 10px;
    padding-right: 10px;
}

Answer 1

根据 Bootstrap3 文档，媒体类的使用应该有效。

<div class="row">
    <div class="col-md-12 media">
        <img src="~/Images/avatar.png" class="media-object profile-picture" />

        <div class="media-body>
            <label class="media-heading">Username - 1 month ago</label>
            This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. 
        </div>
    </div>
</div>

此处有更多相关文档:http://getbootstrap.com/components/#media