Question

我试图在Bootstrap 3中构建个人资料卡，但我无法将图像放入卡中。如果我链接到css中的图像，我认为我可以更容易地做到这一点，但我有很多不同人的个人资料卡，所以我认为在这种情况下保持HTML中的图像链接更好。

以下是我喜欢的方式：

的地方

非常感谢任何帮助。谢谢！

〜托尼

autofocus

Answer 1

与以往一样，您有多个选项，以下是其中一个选项的示例。

<div class="container">
    <div class="row">
        <div class="people-cards">
            <div class="col-md-6" style="border: 1px solid black;">
                <div class="row">
                    <div class="profile-image" style="float:left;">
                        <img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg" />
                    </div>
                    <div class="profile-info">
                        <h3 div class="company">Company Name</h3>
                        <h4 div class="name">Person Name</h4>
                        <h5 div class="title">Job Title</h5>
                    </div>
                    <div class="profile-link">
                        <a href="">VIEW PROFILE</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

基本上你需要让配置文件图像向左浮动，因此其他内容会出现在它旁边。另外，因为您的示例如何包含卡片边框，您需要将图像，信息和链接包装在行中。如果要自定义图像大小，仍可以使用所有Bootstrap的col-size-number。

Working example on JSFiddle

Bootstrap配置文件卡

1 个答案: