时间轴帖子的 HTML 元素

Question

在网络应用程序中，我在单个用户的主页上显示其他用户的帖子。每个帖子都将包含帖子发件人的缩略图个人资料图片、他们在段落中的名字、文本内容以及回复框和按钮。我试图通过 Bootstrap 的网格系统来做到这一点，但没有达到预期的效果。我想模仿 Twitter 主页中的推文，但在我的例子中，个人资料图片和另一列之间有很大差距。

<div class="container" >
    <ul id="newsfeed">
        <li>

            <div class="row">

                    <div class="col-sm-2">
                        <img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
                    </div>
                    <div class="col-sm-4">
                        <p>9gag@9gag</p>
                        <p>This is me</p>
                        <p>twitted at 12:30pm GMT6+</p>
                    </div>
            </div>

        </li>
    </ul>
</div>

Answer 1

您的 .col-sm-2 比您的缩略图宽，您可以做两件事。

1) 您可以使用 .col-sm-1 作为图像容器。

<div class="container" >
    <ul id="newsfeed">
        <li>

            <div class="row">

                    <div class="col-sm-1 narrow">
                        <img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
                    </div>
                    <div class="col-sm-4 narrow">
                        <p>9gag@9gag</p>
                        <p>This is me</p>
                        <p>twitted at 12:30pm GMT6+</p>
                    </div>
            </div>

        </li>
    </ul>
</div>

2) 你可以保持原样，但将 Bootstrap 帮助程序类 pull-right 添加到你的 img 标签。

<div class="container" >
    <ul id="newsfeed">
        <li>

            <div class="row">

                    <div class="col-sm-2">
                        <img src="someimage.png" class="img-thumbnail pull-right" alt="Some Image" width="60" height="60">
                    </div>
                    <div class="col-sm-4 narrow">
                        <p>9gag@9gag</p>
                        <p>This is me</p>
                        <p>twitted at 12:30pm GMT6+</p>
                    </div>
            </div>

        </li>
    </ul>
</div>

CODEPEN DEMO