如何在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;
}