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

この 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 に答える
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 に答える