文本和图像与引导程序并排

Question

我正在尝试使用引导程序将文本和图像并排放置。我希望每个都是页面的一半，并在顶部对齐。有人能帮我吗？我似乎正在做的事情不起作用。以下是我的代码：

<section class="hero-area bg-white overflow-hidden"> 
<div class="container"> 
<div class="row justify-content-between align-items-center">

<div class="col-lg-6 col-md-6">
<h1 class="text-primary font-tertiary">{{   site.Data.homepage.banner1.title | safeHTML }}</h1> 
</div> 
<div class="col-lg-6 col-md-6 mobile-img">
<img src="{{`images/winningScreen3.png` | absURL}}" class="img-fluid" alt="mobile screen">
</div>

</div> 
</div>

</section>

Answer 1

您可以对文本和图像使用col-6断点。因此，总的col-12将分为文本的col-6和图像的col-6(如您所述，分为两半(。以下是的示例片段

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<section class="hero-area bg-white">
<div class="container">
<div class="row text-center">
<div class="col-6 my-auto">
<h1 class="text-primary font-tertiary">Image text </h1>
</div>
<div class="col-6 mobile-img">
<img src="https://dummyimage.com/300" class="img-fluid" alt="mobile screen">
</div>
</div>
</div>
</section>