Bootstrap 4: расстояние между столбцами

Question

Я боролся с какой-то простой вещью на Bootstrap 4, но не могу понять. У меня есть макет из 4 столбцов, между которыми нужно пространство:

<div class="row quotes-row">
      <blockquote class="col-12 col-md-6 col-lg-3 back-box-m back-box p-3" cite="https://www.worldwildlife.org/pages/ways-to-support-wwf">
        <div class="row quote-box">
          <div class="col-3 photo pr-0">
             <img src="img/quote-author-01.png" class="img-fluid" alt="Author name">
          </div>
          <address class="col-9 profile pl-0">
            <p class="name mb-0">Stephanie Bailey</p>
            <p class="charge mb-0">Charge</p>
          </address>
        </div>
        <cite>
          Pellentesque suscipit rutrum eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies mattis lectus, at tristique lectus pharetra nec. Quisque at justo tincidunt libero sagittis tincidunt.
        </cite>
      </blockquote>
      <blockquote class="col-12 col-md-6 col-lg-3 back-box-m back-box p-3" cite="https://www.worldwildlife.org/pages/ways-to-support-wwf">
        <div class="row quote-box">
          <div class="col-3 photo pr-0">
             <img src="img/quote-author-02.png" class="img-fluid" alt="Author name">
          </div>
          <address class="col-9 profile pl-0">
            <p class="name mb-0">Stormie Hansford</p>
            <p class="charge mb-0">Charge</p>
          </address>
        </div>
        <cite>
          Mauris faucibus enim at felis consequat efficitur. Suspendisse ipsum lacus, elementum accumsan dapibus posuere, bibendum eu dui. Donec laoreet accumsan eros sed hendrerit. Suspendisse pulvinar placerat aliquam.
        </cite>
      </blockquote>
      <blockquote class="col-12 col-md-6 col-lg-3 back-box-m back-box p-3" cite="https://www.worldwildlife.org/pages/ways-to-support-wwf">
        <div class="row quote-box">
          <div class="col-3 photo pr-0">
             <img src="img/quote-author-03.png" class="img-fluid" alt="Author name">
          </div>
          <address class="col-9 profile pl-0">
            <p class="name mb-0">Caspar Sawrey</p>
            <p class="charge mb-0">Charge</p>
          </address>
        </div>
        <cite>
          Morbi rhoncus ipsum at purus aliquet, sit amet condimentum nisl tempor. Sed vitae enim at felis dignissim tincidunt. Sed aliquet id orci sed porttitor. Donec vel velit id diam viverra ultrices finibus at eros.  Maecenas rutrum, enim a ultricies pellentesque.
        </cite>
      </blockquote>
      <blockquote class="col-12 col-md-6 col-lg-3 back-box-m back-box p-3" cite="https://www.worldwildlife.org/pages/ways-to-support-wwf">
        <div class="row quote-box">
          <div class="col-3 photo pr-0">
             <img src="img/quote-author-04.png" class="img-fluid" alt="Author name">
          </div>
          <address class="col-9 profile pl-0">
            <p class="name mb-0">Caspar Sawrey</p>
            <p class="charge mb-0">Charge</p>
          </address>
        </div>
        <cite>
          Morbi rhoncus ipsum at purus aliquet, sit amet condimentum nisl tempor. Sed vitae enim at felis dignissim tincidunt. Sed aliquet id orci sed porttitor. Donec vel velit id diam viverra ultrices finibus at eros.  Maecenas rutrum, enim a ultricies pellentesque.
        </cite>
      </blockquote>
    </div>

Это 4 столбца, распределенные в строке, но я не могу понять, как я могу применить пространство между ними.

Результат: введите описание изображения здесь

A pr-3 por, пример pu sh от последнего до следующей строки, и мне нужно все на одном уровне. Стили в каждом blockquote имеют косметическое c значение, только цвет фона и стиль шрифта. Есть идеи?

Answer 1

В основном это спрашивали раньше здесь и здесь .

Вы хотите настроить отступы или поля на содержимом столбцы. В вашем случае это означает использование внутреннего div для обертывания содержимого столбцов.

Например, посмотрите здесь bg-info div ...

   <blockquote class="col-12 col-md-6 col-lg-3 back-box-m back-box p-3" cite="https://www.worldwildlife.org/pages/ways-to-support-wwf">
          <div class="bg-info">
                <div class="row quote-box">
                    <div class="col-3 photo pr-0">
                        <img src="img/quote-author-01.png" class="img-fluid" alt="Author name">
                    </div>
                    <address class="col-9 profile pl-0">
                        <p class="name mb-0">Stephanie Bailey</p>
                        <p class="charge mb-0">Charge</p>
                    </address>
                </div>
                <cite> Pellentesque suscipit rutrum eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies mattis lectus, at tristique lectus pharetra nec. Quisque at justo tincidunt libero sagittis tincidunt. </cite>
          </div>
   </blockquote>

Вы не хотите изменить левое / правое поля в столбцах, потому что это приведет к сбрасыванию системы сетки по причине переноса.

Демо

Answer 2

А вы пробовали дать им маржу? bootstrap класс mx-3, добавленный к элементу внутри каждой цитаты, должен давать каждому из них некоторый запас слева и справа. У вас есть классы заполнения, однако, которые влияют на заполнение внутри элемента, а не снаружи, это изображение очень полезно, чтобы понять, как заполнение и поля работают по-разному:

See more about margins and padding in bootstrap here: https://getbootstrap.com/docs/4.0/utilities/spacing/

Answer 3

Вам действительно следует отделить структуру сетки от блоков содержимого. Все становится грязным и сложным, как только вы go попробуете его.

Итак, структура:

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-3"></div>
        <div class="col-md-6 col-lg-3"></div>
        <div class="col-md-6 col-lg-3"></div>
        <div class="col-md-6 col-lg-3"></div>
    </div>
</div>

Для блоков содержимого:

<blockquote class="quote-box back-box-m back-box p-3" cite="https://www.worldwildlife.org/pages/ways-to-support-wwf">
    <div class="row">
      <div class="col-3 pr-0">
         <img src="img/quote-author-01.png" class="img-fluid" alt="Author name">
      </div>
      <div class="col-9 pl-0">
          <address class="profile">
              <p class="name mb-0">Stephanie Bailey</p>
              <p class="charge mb-0">Charge</p>
          </address>
      </div>
    </div>
    <div class="row">
        <div class="col">
            <cite>
                Pellentesque suscipit rutrum eleifend. Lorem ipsum dolor sit amet, 
                consectetur adipiscing elit. Quisque ultricies mattis lectus, at 
                tristique lectus pharetra nec. Quisque at justo tincidunt libero sagittis tincidunt.
            </cite>
        </div>
    </div>
</blockquote>

Это Мне немного непонятно, как quote-box и back-box соотносятся друг с другом, но я считаю, что вы можете понять это сами.

Теперь, если вам нужно дополнительное пространство, как уже говорили другие люди, используйте служебные классы интервалов, такие как mx-3 или mx-md-5 и т. Д., Для вашего контента.

Обычно можно поставить вертикальное поле в ряду. Горизонтальное поле может применяться только к столбцам, когда не заполнено пространство в 12 столбцов => 2 * col-5 с mx-auto. Заполнение можно применять где угодно (строки сетки, столбцы или содержимое).

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