如何为Bootstrap列设置间距？实现lg屏3卡同行小屏堆叠适配

核心问题原因 #

1. 你不应该把水平外边距（mx-5、mx-lg-2）和卡片样式直接写在Bootstrap的栅格列（col-*）元素上。Bootstrap栅格系统的列宽度是按比例预分配的，三个col-lg-4加起来刚好占满一行12份的宽度，给列额外加水平外边距会让总宽度超过100%，自然放不下三个卡片，第三个就会被挤到下一行。
2. 小屏幕下mx-5会给列添加左右各3rem的外边距，叠加col-12的100%宽度后，整体宽度超出了视口宽度，就出现了溢出问题，和你设置的border-box没有关系。

解决方法 #

把卡片的样式和外边距属性移到列内部的子容器上，栅格列只保留布局相关的类即可，修改后的HTML参考如下：

<div class="container ">
    <div class="row ">
      <!-- 每个栅格列只保留宽度和垂直外边距设置 -->
      <div class="col-lg-4 col-12 my-5">
        <!-- 卡片样式和水平边距写在内部容器 -->
        <div class="box mx-3 mx-lg-2 p-4">
          <p class="top">FREE</p>
          <p class="text-center"><span class="heading">$0</span><span>/month</span>
            <hr/>
          </p>
          <ul class="tick">
            <li>Single User</li>
            <li>5GB Storage</li>
            <li>Unlimited Public Projects</li>
            <li>Community Access</li>
          </ul>
          <ul class="cross">
            <li>Unlimited Private Projects</li>
            <li>Dedicated Phone Support</li>
            <li>Free Subdomain</li>
            <li>Monthly Status Reports</li>
          </ul>
        </div>
      </div>
      <!-- 另外两个卡片也按照同样的结构修改即可 -->
      <div class="col-lg-4 col-12 my-5">
        <div class="box mx-3 mx-lg-2 p-4">
          <p class="top">FREE</p>
          <p class="text-center"><span class="heading">$0</span><span>/month</span>
            <hr/>
          </p>
          <ul class="tick">
            <li>Single User</li>
            <li>5GB Storage</li>
            <li>Unlimited Public Projects</li>
            <li>Community Access</li>
          </ul>
          <ul class="cross">
            <li>Unlimited Private Projects</li>
            <li>Dedicated Phone Support</li>
            <li>Free Subdomain</li>
            <li>Monthly Status Reports</li>
          </ul>
        </div>
      </div>
      <div class="col-lg-4 col-12 my-5">
        <div class="box mx-3 mx-lg-2 p-4">
          <p class="top">FREE</p>
          <p class="text-center"><span class="heading">$0</span><span>/month</span>
            <hr/>
          </p>
          <ul class="tick">
            <li>Single User</li>
            <li>5GB Storage</li>
            <li>Unlimited Public Projects</li>
            <li>Community Access</li>
          </ul>
          <ul class="cross">
            <li>Unlimited Private Projects</li>
            <li>Dedicated Phone Support</li>
            <li>Free Subdomain</li>
            <li>Monthly Status Reports</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

你原来的CSS代码不需要做任何修改，调整HTML结构后就能实现预期效果：大于lg断点时三个卡片同行排列，小于lg断点时卡片垂直堆叠且不会溢出屏幕。

内容的提问来源于stack exchange，提问作者Sathwic