Bootstrap 4 how to have margin between columns without going over space

问题

I'm trying to create 3 columns of content with a bit of margin between each so that with shadow they look distinct.

However when I add some margin with mr-3 to the left and middle columns this makes the columns go beyond the width of the space and wrap.

How can I create space between the cards/columns without making them go over the available space?

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

回答1:

If you set margins on the columns it will "break" the Bootstrap grid. The spacing between the columns (gutter) is created with padding. Therefore, you should add another container/box inside the columns for the shadow, and then adjust the column padding as desired:

    <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

回答2:

Try adding a wrapper div for your content inside the columns. By default Bootstrap columns have a gutter space between them, and if you add a div in between you'll see the gutter space show up. You can add extra margin/padding if you want. Here's an edited version of your example.

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

来源：https://stackoverflow.com/questions/51160147/bootstrap-4-how-to-have-margin-between-columns-without-going-over-space