我想要使用 bootstrap 的文本旁边的图像，但为什么它会出现在下一行？

Question

我正在使用 Bootstrap 5 并且我试图将图像放在文本旁边，但是当我在两个列上插入“col-lg-6”时，一列正在进行下一行。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row bg-white">
  <div class="col-6">
    <img src="https://via.placeholder.com/100" class="img-fluid" alt="">
  </div>
  
  <div class="col-6 mt-5 ms-5">
    <h2 class="fs-1 fw-light">Why Choose Us?</h2>
    <h4 class="fs-3 my-3 fw-bold">We are trusted by many costumers</h4>
  </div>
</div>

Answer 1

<div class="row bg-white">
  <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
    <img src="/images/section3/wheel.jpg" class="img-fluid" alt="">
  </div>
  <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 mt-5">
    <h2 class="fs-1 fw-light">Why Choose Us?</h2>
    <h4 class="fs-3 my-3 fw-bold">We are trusted by many costumers</h4>
  </div>
</div>

请从您的文本中删除 ms-5 class，因为它会在左侧留下 space（margin-left：3rem！重要；）。

Answer 2

通过向列添加边距，您可以使其比 other half-width 列为它留下的 space 更宽。请改用填充。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row bg-white">
  <div class="col-6">
    <img src="https://via.placeholder.com/100" class="img-fluid" alt="">
  </div>
  
  <div class="col-6 pt-5 ps-5">
    <h2 class="fs-1 fw-light">Why Choose Us?</h2>
    <h4 class="fs-3 my-3 fw-bold">We are trusted by many costumers</h4>
  </div>
</div>

我想要使用 bootstrap 的文本旁边的图像，但为什么它会出现在下一行？

I want an image next to a text using bootstrap, but why is it going on the next row?

bootstrap-5

我想要使​​用 bootstrap 的文本旁边的图像，但为什么它会出现在下一行？

I want an image next to a text using bootstrap, but why is it going on the next row?

bootstrap-5

我想要使用 bootstrap 的文本旁边的图像，但为什么它会出现在下一行？