将文本放在bootstrap 5行中图像的旁边(col-sm-6)

Question

我真的不能很好地解释，所以这里有一些图片。

这就是我目前所拥有的：https://prnt.sc/184ourg

这就是我要访问的内容：https://prnt.sc/184pfgt

这基本上就是HTML：

<div class="row row-align">
    <div id="bg1" class="col-sm-6 background-1 rounded-corners maxheight">
        <img class="logoMaxSize rounded-corners" src="files/placeholder.png">
        <p>text</p>
    </div>
</div>

不同的类：

row是在Bootstrap 5中使用的

row-align正在将宽度设置为100%，并将左边界设置为0px

#bg1在这里并不重要

col-sm-6引导程序5中使用的引导程序

background-1只是一个渐变

rounded-corners将边框半径设置为15px

maxheight将最大高度设置为100px

logoMaxSize将placeholder.png的宽度和高度设置为100px

我可以做或尝试的任何事情，基本上可以让我得到第二个图像？红色的垂直线不一定要在那里，我基本上只希望文本(或p标记)显示在图像旁边，同时仍然在col-sm-6中。

Answer 1

您可以像下面这样应用这个类。

<div class="row row-align **d-flex align-items-start**">
        <div id="bg1" class="col-sm-6 background-1 rounded-corners maxheight"  >
            <img class="logoMaxSize rounded-corners" src="files/placeholder.png">
            <p >text</p>
        </div>
    </div>

Answer 2

您可以使用bootstrap类来创建它。您还可以添加新类( p标签中的txt1)，如下所示：

<div class="row row-align">
    <div id="bg1" class="col-sm-6 background-1 rounded-corners maxheight">
        <img class="logoMaxSize rounded-corners" src="joe_kdw.jpg" width="162" height="162">
        <p class="txt1">text</p> <!-- add new class, e.g. txt1 -->
    </div>
</div>

添加简单的css：

img.logoMaxSize,p.txt1{float:left;}

​

​