Question

我正在尝试创建3列内容，每列之间留有一定的余量，以便使用shadow看起来很独特。

但是，当我在左边和中间的列上添加mr-3的边距时，这会使列超出了空格的宽度并自动换行。

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

Answer 1

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

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

Bootstrap 4如何在不占用空间的情况下在列之间留出边距

2 个答案: