引导卡无法与列一起正常工作答案

【问题标题】：Bootstrap Cards not working correctly with columns引导卡无法与列一起正常工作
【发布时间】：2022-01-26 01:38:53
【问题描述】：

在小型设备上，我想以单行显示“卡片” -> 左侧的图像和右侧的名称和描述。在较大的设备上，我希望并排放置几张卡片 -> 顶部有图片，下方有描述的标题。

上面的图片和下面的文字对我来说很好，无论如何我无法将图片交换到左边和文本到右边。

这是我目前的代码：

<div class='col'>
  <div class='card h-100'>
    <div class='col-4 col-md-12'>
      <img src='...' class='img-fluid rounded-start' alt='...'>
    </div>
    <div class='col-8 col-md-12'>
      <div class='card-body'>
        <h5 class='card-title'>Title</h5>
        <p class='card-text'>Description</p>
      </div>
    </div>
  </div>
</div>

在小型设备上，我正确设置了图像的 col-4 和 col-8 文本，但它们仍然保持在彼此下方，我不明白为什么。

【问题讨论】：

标签： html css bootstrap-5

【解决方案1】：

将您的第一个 div 上的类 col 更改为 row。之后，您可以在某些列中添加您的card，并将它们与col-md-x、col-lg-x 和col-xl-x 并排放置在更大的屏幕上。

card 中的内容也是如此。将div 中的内容与row 类分组，并将内容的每个部分分组到某些列中。

这里有更多关于Bootstrap Grid System的信息

这是一个例子：

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

<div class='row'>
  <div class="col-md-4 col-12">
    <div class='card h-100'>
      <div class='row'>
        <div class='col-md-12 col-4'>
          <img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
        </div>
        <div class='col-md-12 col-8'>
          <div class='card-body'>
            <h5 class='card-title'>Title</h5>
            <p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-12">
    <div class='card h-100'>
      <div class='row'>
        <div class='col-md-12 col-4'>
          <img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
        </div>
        <div class='col-md-12 col-8'>
          <div class='card-body'>
            <h5 class='card-title'>Title</h5>
            <p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-12">
    <div class='card h-100'>
      <div class='row'>
        <div class='col-md-12 col-4'>
          <img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
        </div>
        <div class='col-md-12 col-8'>
          <div class='card-body'>
            <h5 class='card-title'>Title</h5>
            <p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-12">
    <div class='card h-100'>
      <div class='row'>
        <div class='col-md-12 col-4'>
          <img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
        </div>
        <div class='col-md-12 col-8'>
          <div class='card-body'>
            <h5 class='card-title'>Title</h5>
            <p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：