如何使用 Bootstrap 4 在 CSS 中的文本旁边放置图像？

Question

我想创建一个框，让我可以在右侧显示用户的个人资料照片，然后是他的昵称。

因此，为此，我知道我正在使用Bootstrap 4 ，因此我采取了多种方式：

• 我首先尝试使用这些列，但它没有用。
• 然后我在互联网上寻找解决方案，我从一些用户那里找到了一些答案，但这似乎不是我的解决方案。 （ 特别是这个。 ）

所以我进一步调整了它，尝试了flexbox实用程序之类的东西，但我肯定做错了。

后来我想这还不错，我只是想向你们中的一些人寻求帮助，我很确定我会在这里找到解决方案。

让我通过向您展示这个示例来解释自己：

这是我的代码（我没有组织，抱歉）：

 :root { --nsfr-pfp-border-radius: none; }.wrapper-fluid { padding: 8em; }.nsfr-pfp { margin-right: auto; margin-left: auto; max-height: none; max-width: 100%; border-radius: var(--nsfr-pfp-border-radius); }.nsfr-pfp-wrap { width: 250px; height: 250px; cursor: pointer; border-radius: 50%; background-color: transparent; overflow: hidden; float:left; }.wrap { clear: both; background-color: var(--wrap); border-radius: 10px; padding: 2em 3.4em; }.username { display: inline-block; font-size: 50px; color: var(--body-color); }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <div class="wrapper-fluid"> <div class="container"> <div class="wrap"> <div class="col-md-6"> <div class="nsfr-pfp-wrap"> <img class="nsfr-pfp" alt="Profile Picture" src="https://www.nosfera.app/build/i/_global/user_default.png"> </div> </div> <div class="col-md-6"> <h1 class="username"> Jesztar </h1> </div> </div> </div> </div>

如果缺少一些东西，请告诉我。

顺便说一句，我还是前端开发的新手，所以请宽容并原谅我的知识不足。

Answer 1

有很多方法可以做到这一点：

• 自己编码
• 像@Pete 所说的那样使用.card Bootstrap 组件
• 使用 Bootstrap 中的 flexbox 实用程序

我将向您展示 Bootstrap 卡组件方式：

<div class="card rounded">
    <div class="card-body"> 
        <div class="row no-gutters">
            <div class="col-md-3">
                <img class="img-fluid rounded-circle" alt="Profile Picture"
                        src="https://www.nosfera.app/build/i/_global/user_default.png" />
            </div>
            <div class="col-md-7 ml-md-auto">
                <h5 class="card-title">
                    Username
                </h5>
                <p>
                    Biography, and other details
                </p>
            </div>
        </div>
    </div>
</div>

• .rounded ： 引导组件 class将边框半径设置为默认值
• 我使用.card-body给它一些填充。 您也可以使用 Bootstrap 中的Spacing 实用程序。 例如， .p-3 。
• 来自Bootstrap 响应式图像组件的.img-fluid以使配置文件图像响应式。
• .rounded-circle Bootstrap 组件再次将配置文件图像的边框半径设置为更加圆润
• .ml-md-auto是设置margin left auto 到md 断点。 我只是喜欢在左右部分之间留一点空隙。

您会看到，如果您不想自己编写代码，可以使用 Bootstrap 中的许多组件和实用程序类。 我强烈建议您通读一遍 Bootstrap 文档以熟悉它。

演示： https://jsfiddle.net/davidliang2008/pj6tq135/10/

Answer 2

我想通过管理我在编写代码时忘记的“行” class 来解决它。