0

基本上，我正在尝试将填充添加到配置文件图像并将其对齐，如下所示在我的引导页面中。

以下是它目前的样子：

在此处输入图像描述

这就是我希望它的外观：

在此处输入图像描述

（请注意，用户名在个人资料图片的顶部，评论文本在下方，但与个人资料图片并排）

这是 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;
}
4

5 回答 5

2

根据 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

于 2013-10-22T19:34:54.420 回答
1

您可能需要考虑为 p 标签提供一些 css 属性。

http://jsfiddle.net/hXaRG/2/`">小提琴

于 2013-10-22T19:45:02.757 回答
0

尝试这个：

.profile-picture{float:left;margin-right:5px;}
.row p {margin-top:0;margin-left:52px;}
.row{width:500px;background:gray;}

这是最终的结果：

https://docs.google.com/file/d/0B3q2DOPnNwNhM29SYXhEMXhlc3c/edit?usp=sharing

于 2013-10-22T19:22:24.213 回答
0

您必须浮动图像和内容才能达到预期的效果。您必须像这样修改一些html代码：

<div class="row">
            <div class="col-md-12">
                <img src="~/Images/avatar.png" class="profile-picture" />
                <div class="comment">
                    <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>
        </div>

和CSS

.profile-picture, .comment{float:left;}
.comment label {display: block;}

我没有放你想要的边距/填充。

于 2013-10-22T19:30:56.047 回答
0

试试这个 CSS：

.row {
    position:relative;
    background: #999;
}
img {
    position:absolute;
    left:0;
    top:0;
}
.col-md-12 {
    padding-left:80px;  
}

jsFiddle 示例

（注意 .row 上的背景颜色仅用于可视化目的）

于 2013-10-22T19:34:34.600 回答