如何在Bootstrap网格中的图像旁边放置标题？

Question

我希望复制Apple的iPhone消息传递界面。 但是，我无法在收件箱中看到该人的名字并显示在姓名首字母图标旁边，并且我也无法在该人的名字下方看到灰色的小字母。 我提供了一个屏幕截图，以便您可以更好地了解我要做什么！

这是我当前拥有的HTML标记代码：

<section class="messaging-body">
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-6">
                <div class="messaging-icon">
                    <img class="img-responsive" src="message-name.png">
                </div>
            </div>
        </div>
    </div>
</section>

当前图像
所需图片

如果您对如何进行这项工作有任何想法，请告诉我。 谢谢！

Answer 1

缩写的宽度是否可能太大？ 您是否尝试将col-md-2或col-md-1用作缩写？ 另外，您可以在CSS中使用内联块将两个文本框与首字母图像对齐。 我会将文本包装在一个div中，这样您只需要对齐该文本即可。 根据您发布的代码，这将是我的最佳猜测！

<section class="messaging-body">
    <div class="container">
        <div class="row">
            <div class="col-xs-2 col-md-2">
                <div class="messaging-icon">
                    <img class="img-responsive" src="message-name.png">
                </div>
            </div>
            <div class="col-xs-10 col-md-10">
                <div class="message">
                    <h4>Name of the person</h4>
                    <p>Lorem Ipsum dolor sit amet, dicta paulo no est...</p>
                </div>
            </div>
        </div>
    </div>
</section>

的CSS

.message {
    display: inline-block;
}