Bootstrap 4, как иметь поле между столбцами, не выходя за пробел

Question

Я пытаюсь создать 3 столбца контента с небольшим отступом между ними, чтобы при shadow они выглядели отчетливо.

Однако, когда я добавляю некоторое поле с mr-3 к левому и среднему столбцам, это приводит к тому, что столбцы выходят за пределы ширины пространства и переносятся.

Как я могу создать пространство между карточками / столбцами, не заставляя их пересекать доступное пространство?

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

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>