bootstrap 4如何在不超过空格的情况下获得列之间的边距

如果在列上设置边距,它将“打断”引导网格。列(边沟)之间的间距是使用填充创建的。因此,您应该在阴影的列中添加另一个容器/框,然后根据需要调整列填充:

    <div class="row">
            <div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
                <div class="shadow">
                    <div class="feature-icon pb-3">
                        <i class="fa fa-piggy-bank"></i>
                    </div>
                    <div class="">
                        <h4 class="">Some title.</h4>
                        <p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
                    </div>
                    <!--//content-->
                </div>
            </div>
            <!--//item-->

            <div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
                <div class="shadow">
                    <div class="feature-icon pb-3">
                        <i class="fa fa-piggy-bank"></i>
                    </div>
                    <div class="">
                        <h4 class="">Another title.</h4>
                        <p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
                    </div>
                    <!--//content-->
                </div>
            </div>
            <!--//item-->

            <div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
                <div class="shadow">
                    <div class="feature-icon pb-3">
                        <i class="fa fa-piggy-bank"></i>
                    </div>
                    <div class="">
                        <h4 class="">One more title.</h4>
                        <p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
                    </div>
                    <!--//content-->
                </div>
            </div>
            <!--//item-->
    </div>

https://www.codeply.com/go/aQBL68BvFU

尝试在列中为内容添加包装div。默认情况下,引导列之间有间距,如果在间距中添加div,将显示间距。如果需要,可以添加额外的边距/填充。这是你例子的编辑版本。

<section class="key-features">

  <div class="container">
    <div class="row flex-column align-items-center">

    </div>
</div>

<div class="container pt-4 pb-4 mb-5 ">
  <div class="row">

    <div class="col-md-4 col-sm-6 col-xs-12">
      <div class=" text-center feature-item rounded py-3 shadow">
        <div class="feature-icon pb-3">
          <i class="fa fa-piggy-bank"></i>
        </div>
        <div class="">
          <h4 class="">Some title.</h4>
          <p>some testxt asdfasdfoa aasdf kjkha asdfasfd   khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
        </div><!--//content-->
      </div>

    </div><!--//item-->

    <div class="col-md-4 col-sm-6 col-xs-12">
      <div class=" text-center feature-item rounded py-3 shadow">
        <div class="feature-icon pb-3">
          <i class="fa fa-hourglass-end"></i>
        </div>

        <div class="">
          <h4 class="title">Anotehr title</h4>
          <p> some testxt asdfasdfoa aasdf kjkha asdfasfd   khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.
          </p>
        </div><!--//content-->
      </div>
    </div><!--//item-->
    <div class="col-md-4 col-sm-6 col-xs-12">
      <div class=" text-center feature-item rounded py-3 shadow">
        <div class="feature-icon pb-3">
          <i class="fa fa-check"></i>
        </div>
        <div class="">
          <h4 class="">One more title</h4>
          <p>some testxt asdfasdfoa aasdf kjkha asdfasfd   khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
        </div><!--//content-->
      </div>
    </div><!--//item-->

  </div>

  <div class="row justify-content-center my-5">
    <a class="btn btn-success shadow" href="{% url "users:postcode" %}">Get Started -></a>
  </div>
 </div>
</section>