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>

Current image
Desired image

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

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;
}

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

1 个答案: