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

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

Answer 2

cols内部的填充效果很好。使用类px-5。您可以在其中使用0到5的数字形式。 px表示“填充x”（左右）。尽管您可以在其中使用大小断点，例如px-sm-3。在https://getbootstrap.com/docs/4.4/utilities/spacing/

处了解有关Bootstrap 4中填充的更多信息

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

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

2 个答案: