Html Bootstrap 4转盘，背景为纯色，右侧为图像，左侧为文本

如果我问了一些愚蠢的问题，请原谅，但我需要创建一个以纯色为背景的完整页面滑块，左侧有一些文本，右侧有一个图像。差不多。 目前我想要的结果是

我用过Bootstrap 4的旋转木马

我对它进行了轻微的修改，并将其背景设置为灰色，与谷歌图片中的一样。现在，我希望文本左对齐，并且在右侧有一个响应性自动调整大小的图像（或者即使我可以在文本顶部调整图像），在移动设备上查看时也会响应。差不多

我正在使用，并已将代码修改为

<div class="carousel-item" style="background-color: #eff0f1">
        <div class="carousel-caption d-none d-md-block">
          <h2 class="display-4">First Slide</h2>
          <p class="lead">This is a description for the first slide.</p>
        </div>
      </div>

<style>
    .carousel-item {
        background-color: #eeeeee; /*Solid grey background*/
        }
    .carousel-caption {
        color: black;
        }
</style>

第一张幻灯片
这是第一张幻灯片的说明
.传送带项目{
背景色：#eeeeee；/*纯灰背景*/
}
.旋转木马标题{
颜色：黑色；
}

从旋转木马标题中删除d-none类，然后尝试以下方法：

.carousel项目{
高度：100vh；
最小高度：350px；
背景：无重复中心滚动；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.text_部分{
显示：无；
}
@介质（最大宽度：575px）{
.text_部分{
显示：块；
}
.左上角{
显示：无；
}
}

你的文字



你的文字
img
你的文字
img
你的文字
img

从旋转木马标题中删除d-none类，然后尝试以下方法：

.carousel项目{
高度：100vh；
最小高度：350px；
背景：无重复中心滚动；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.text_部分{
显示：无；
}
@介质（最大宽度：575px）{
.text_部分{
显示：块；
}
.左上角{
显示：无；
}
}

你的文字



你的文字
img
你的文字
img
你的文字
img