Bootstrap 4 引导4：列之间的空间

我在Bootstrap4上遇到了一件很简单的事情，但我真的搞不懂。 我有一个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>

一个
pr-3
por示例将最后一个推到下一行，我需要所有内容处于同一级别。
每个
blockquote
中的样式都具有装饰意义，只有背景色和字体样式。
有什么想法吗？
你试过给他们留点余地吗？添加到每个blockquote中的元素中的引导类mx-3应为每个blockquote提供一些左右边距。您有padding类，但是会影响元素内部而不是外部的填充，此图像对于理解填充和边距的工作方式非常有用：


在这里查看有关引导中边距和填充的更多信息：
您是否尝试过给它们一个边距？添加到每个blockquote中的元素中的引导类mx-3应为每个blockquote提供一些左右边距。您有padding类，但是会影响元素内部而不是外部的填充，此图像对于理解填充和边距的工作方式非常有用：


有关引导中的边距和填充的更多信息，请参见此处：
基本上，这是和

您希望调整列内容的填充或边距。在您的例子中，这意味着使用一个内部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>


基本上，这一直都是

您希望调整列内容的填充或边距。在您的例子中，这意味着使用一个内部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>


您真的应该将网格结构与内容块分开。
一旦你沿着你尝试的方式走下去，一切都会变得污染和复杂

So结构：

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


斯蒂芬妮·贝利

充电

白藜芦。Lorem ipsum dolor sit amet，
献祭精英。奎斯克·尤里西斯·马蒂斯·莱克图斯
法雷特拉国家图书馆。奎斯克在胡斯托·廷西德蒙特自由女神萨吉蒂·廷西德蒙特。

我不太清楚
quote box
和
back box
是如何相互关联的，但我相信你可以自己解决这个问题


现在，如果您需要额外的空间，正如其他人已经说过的，请在您的内容上使用实用程序间隔类，如
mx-3
或
mx-md-5
等

垂直边距通常可以放在行上。只有当12列的空间未使用mx auto填充=>2*col-5时，水平边距才能应用于列。
填充可以应用于任何位置（网格行、列或内容）

因此，一旦结构就位，就可以将内容块插入到它们的resp中。随你的便。对内容块的更改不会改变网格的工作方式。
您应该真正将网格结构与内容块分开。
一旦你沿着你尝试的方式走下去，一切都会变得污染和复杂

So结构：

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


斯蒂芬妮·贝利

充电

白藜芦。Lorem ipsum dolor sit amet，
献祭精英。奎斯克·尤里西斯·马蒂斯·莱克图斯
法雷特拉国家图书馆。奎斯克在胡斯托·廷西德蒙特自由女神萨吉蒂·廷西德蒙特。

我不太清楚
quote box
和
back box
是如何相互关联的，但我相信你可以自己解决这个问题


现在，如果您需要额外的空间，正如其他人已经说过的，请在您的内容上使用实用程序间隔类，如
mx-3
或
mx-md-5
等

垂直边距通常可以放在行上。只有当12列的空间未使用mx auto填充=>2*col-5时，水平边距才能应用于列。
填充可以应用于任何位置（网格行、列或内容）

因此，一旦结构就位，就可以将内容块插入到它们的resp中。随你的便。对内容块的更改不会改变网格的工作方式。
您可以减小
blockquote
和
cite
元素的宽度。全屏显示，以便所有4列位于同一行。您可以减小
blockquote
和
cite
元素的宽度。全屏显示，这样所有4列都在同一行嘿，我已经尝试使用
mx-
类，但结果是：我忘记了父元素上的某些内容？尝试将mx类添加到块引号内的div中，而不是块引号中，或者用列信息在它们周围放置一个div，将边距和列添加到相同的元素可以打破网格，理想情况下，边距应该添加到列元素内的元素。嘿，我已经尝试使用
mx-
类，但结果是：我忘记了