时间戳

首页 > 解决方案 > 如何在 Bootstrap 4 中的列之间添加空格

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

问题描述

我使用 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>

三列

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

标签： csstwitter-bootstrapbootstrap-4

解决方案

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>

推荐阅读