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

【问题标题】：How can I have a title placed next to an image in a Bootstrap grid?如何在 Bootstrap 网格中的图像旁边放置标题？
【发布时间】：2016-08-30 13:41:26
【问题描述】：

我希望复制 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>

Current image
Desired image

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

【问题讨论】：

标签： html css twitter-bootstrap grid

【解决方案1】：

有没有可能是缩写的宽度太大了？您是否尝试使用 col-md-2 或 col-md-1 作为首字母？此外，您可以在 CSS 中使用 inline-block 将两个文本框与首字母图像对齐。我会将文本包装在一个 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;
}

【讨论】：