如何使用引导程序在带有标题和段落的两个图像之间添加空格？答案

【问题标题】：How do I add space between two images with headers and paragraphs using bootstrap?如何使用引导程序在带有标题和段落的两个图像之间添加空格？
【发布时间】：2022-02-08 19:44:37
【问题描述】：

我正在从 Codewell 复制一个作品集以进行练习，我似乎无法在图像之间创建空间而不会拉伸图像并且文本会消失。我试过使用 display: flex 和 justify-content: space-between ，它会拉伸图像。

这里是投资组合的链接供参考：https://www.codewell.cc/challenges/web-developer-portfolio--617d4897a383e41090a3e46f

这是我的代码：

.web-div {
  display: flex;
  justify-content: space-between;
}

<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="container">
  <div class="row">
    <div class="col-lg-6 web-div">
      <img src="Assets/Spense.png" alt="Spense Image">
      <h2>Spence.com <i class="fi fi-rr-arrow-right"></i></h2>
      <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less when and how they'll get paid. Project in collaboration with Codewell.cc</p>
    </div>
    <div class="col-lg-6 web-div">
      <img src="Assets/YelpCamp.png" alt="Yelp Camp">
      <h2>YelpCamp.com <i class="fi fi-rr-arrow-right"></i></h2>
      <p>Allowing backpack travelers to perfectly plan their trip through an open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favorite in 2021.</p>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css flexbox bootstrap-5

【解决方案1】：

如果您使用的是 BS5，那么您应该遵循以下步骤： https://getbootstrap.com/docs/5.0/utilities/spacing/

【讨论】：