Bootstrap 4如何实现行内列居中并增大列间距？

下面给你几种可行的实现方式，解决列居中且间距不足的问题：

方法一：调整列宽 + 内置间距类 #

缩小列的宽度，结合Bootstrap的水平对齐类和间距类，让列整体居中同时拉开间距：

<section id="footer">
  <div class="container">
    <div class="row justify-content-center"> <!-- 让列组水平居中 -->
      <div class="col-3 mx-3"> <!-- 用col-3替代col-4，mx-3添加左右间距 -->
        <h1>TEST</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </div>
      <div class="col-3 mx-3">
        <h1>TEST</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
      <div class="col-3 mx-3">
        <h1>TEST</h1>
        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,</p>
      </div>
    </div>
  </div>
</section>

• justify-content-center：让row内的列在水平方向居中对齐
• col-3：将原有的col-4缩小为col-3，留出额外空间分配间距
• mx-3：控制列之间的左右间距，可根据需求替换为mx-2/mx-4调整大小

方法二：自定义 gutter（间距）样式 #

如果需要保留原有的col-4宽度，可通过自定义CSS调整列的内边距，同时抵消row的负margin：

<section id="footer">
  <div class="container">
    <div class="row custom-gutter">
      <div class="col-4">
        <h1>TEST</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </div>
      <div class="col-4">
        <h1>TEST</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
      <div class="col-4">
        <h1>TEST</h1>
        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,</p>
      </div>
    </div>
  </div>
</section>

<style>
.custom-gutter {
  margin-left: -20px;
  margin-right: -20px;
}
.custom-gutter .col-4 {
  padding-left: 20px;
  padding-right: 20px;
}
</style>

• 自定义.custom-gutter类，通过调整row的负margin和列的padding值，直接增大列之间的间距
• 这种方式不改变列的布局结构，适合需要保持列宽度的场景

方法三：嵌套容器实现内容间距 #

给每个列的内容套一层内层容器，通过内层容器的margin控制间距，同时保留原列宽度：

<section id="footer">
  <div class="container">
    <div class="row">
      <div class="col-4">
        <div class="mx-3"> <!-- 内层容器添加左右间距 -->
          <h1>TEST</h1>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
      </div>
      <div class="col-4">
        <div class="mx-3">
          <h1>TEST</h1>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
      </div>
      <div class="col-4">
        <div class="mx-3">
          <h1>TEST</h1>
          <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,</p>
        </div>
      </div>
    </div>
  </div>
</section>

• 内层容器的mx-3直接给内容块添加左右间距，不影响外层列的布局
• 可以给内层容器额外添加p-4类，优化内容内部的留白，提升观感

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