如何在 Bootstrap 4 中的列之间添加空格

Question

我使用 Bootstrap 4 有以下包含 3 列的容器

  <section id="features">

    <div class="container-fluid">
      <div class="row justify-content-around">
        <div class="col-lg-4 col-md-12 ">
          <i class="fas fa-check-circle"></i>
          <h3>Easy to use.</h3>
          <p>So easy to use, even your dog could do it.</p>
        </div>

        <div class="col-lg-4 col-md-12" >
          <i class="fas fa-bullseye"></i>
          <h3>Elite Clientele</h3>
          <p>We have all the dogs, the greatest dogs.</p>
        </div>

        <div class="col-lg-4 col-md-12">
          <i class="fas fa-heart"></i>
          <h3>Guaranteed to work.</h3>
          <p>Find the love of your dog's life or your money back.</p>
        </div>
      </div>
    </div>
  </section>

我想在它们之间添加空格，以便它们更加分开，但是当我尝试添加填充或边距时，它会破坏行。如何在同一行中添加维护三个项目的空间。

Answer 1

cols 内的填充效果很好。使用类px-5。您可以在其中使用 0 到 5 的数字形式。 px 表示“填充 x”（左侧和右侧）。尽管您可以在其中使用大小断点，例如px-sm-3。有关 Bootstrap 4 中的填充的更多信息，请点击此处https://getbootstrap.com/docs/4.4/utilities/spacing/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
 <section id="features">

    <div class="container-fluid">
      <div class="row justify-content-around">
        <div class="col-lg-4 col-sm-12 px-5">
          <i class="fas fa-check-circle"></i>
          <h3>Easy to use.</h3>
          <p>So easy to use, even your dog could do it.</p>
        </div>

        <div class="col-lg-4 col-sm-12 px-5" >
          <i class="fas fa-bullseye"></i>
          <h3>Elite Clientele</h3>
          <p>We have all the dogs, the greatest dogs.</p>
        </div>

        <div class="col-lg-4 col-sm-12 px-5">
          <i class="fas fa-heart"></i>
          <h3>Guaranteed to work.</h3>
          <p>Find the love of your dog's life or your money back.</p>
        </div>
      </div>
    </div>
  </section>

Answer 2

我建议使用Flex 来管理东西的行（和列）：它还提供了定义元素内部和外部空间的方法。