Bootstrap5布局中文字距列/盒子边缘过近 如何添加padding内边距

直接使用Bootstrap5内置的间距工具类即可实现，无需编写自定义CSS，具体操作如下：

• 替换过时类：代码中row上的no-gutters是Bootstrap4的语法，Bootstrap5已移除该类，替换为g-0即可清除列之间默认的间距槽，实现两列无缝贴合。
• 添加内边距类：Bootstrap的padding类遵循p{方向}-{断点?}-{尺寸}规则：
  • 方向参数：省略则为四个方向加内边距，x代表左右、y代表上下，也可单独用t/b/s/e指定上、下、左、右单方向
  • 断点参数（可选）：加md/lg等断点可实现响应式内边距，比如p-md-5代表屏幕宽度≥768px时生效5单位内边距
  • 尺寸参数：取值0-5，数值越大内边距越宽，常规文字留白用3-5单位即可

修改后可直接运行的代码 #

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body --> 
<div class="row g-0">
  <!-- 文字列加响应式内边距：移动端3单位、md及以上屏幕5单位 -->
  <div class="col-md-6 d-flex align-items-center flex-column justify-content-center bg-dark p-3 p-md-5">
    <h2 class="mb-0 text-white">Za sve vremenske prilike</h2>
    <br>
    <p class="mb-0 text-white">Grijanje i Hlađenje</p>
    <p class="mb-0 text-white">Zgrada je opremljena najsavremenijom tehnologijom.</p>
  </div>
  <div class="col-md-6 order-first order-md-last">
    <!-- 新增object-fit-cover避免图片拉伸变形 -->
    <img src="https://via.placeholder.com/200.jpg" class="w-100 h-100 object-fit-cover">
  </div>
</div>

可选优化方案 #

如果需要列的背景色完全铺满边缘，仅让文字内容向内缩进，可以把所有文字内容单独包裹在内层容器中，给内层容器加padding类即可，不影响外层列的背景显示：

<div class="col-md-6 d-flex align-items-center bg-dark">
  <!-- 内层容器控制文字留白 -->
  <div class="w-100 p-3 p-md-5 text-center">
    <h2 class="mb-0 text-white">Za sve vremenske prilike</h2>
    <br>
    <p class="mb-0 text-white">Grijanje i Hlađenje</p>
    <p class="mb-0 text-white">Zgrada je opremljena najsavremenijom tehnologijom.</p>
  </div>
</div>

实现效果参考：

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