我想要一个图片旁边的文本使用引导，但它为什么要在下一行？

Question

我使用引导带5，我试图把一个图像旁边的文字，但当我插入“cols 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类，因为它从左侧留出空间(边距-左:3 3rem！重要；)

Answer 2

通过向一列添加页边距，可以使另一半宽列留给它的空间更宽。用填充物代替。

​

<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>

​