Bootstrap 4如何在不超出空间的情况下在列之间设置边距

Question

我正在尝试创建 3 列内容，每列之间都有一点边距，以便 shadow 看起来不同。

但是，当我在左侧和中间的列中添加一些带有 mr-3 的边距时，这会使列超出空间的宽度并换行。

如何在卡片/列之间创建空间而不使它们超出可用空间？

https://codepen.io/anon/pen/KeYgvg

Answer 1

如果您在列上设置边距，它将“破坏”引导网格。列之间的间距（装订线）是使用填充创建的。因此，您应该在阴影的列内添加另一个容器/框，然后根据需要调整列填充：

    <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

Answer 2

尝试在列中为您的内容添加包装 div。默认情况下，Bootstrap 列之间有一个装订线空间，如果您在它们之间添加一个 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>