Bootstrap 4中图书详情卡片的边距对齐问题求助

针对你col-8内Card需要上下左右留间距的需求，给你几个Bootstrap 4原生的实用解决方案：

方案1：用Bootstrap自带间距工具类（推荐） #

Bootstrap 4内置了一套间距工具类，格式为{property}{sides}-{size}，直接给Card元素添加就能快速实现间距：

• m-*控制外边距（margin），p-*控制内边距（padding）
• 尺寸可选0-5，还有auto，比如m-3对应中等外边距

示例代码：

<div class="row">
  <div class="col-8">
    <!-- 给card添加上下my-4、左右mx-3的外边距 -->
    <div class="card my-4 mx-3">
      <div class="card-body">
        <h5 class="card-title">图书标题</h5>
        <p class="card-text">作者：XXX | ISBN：XXXXXX</p>
        <p class="card-text">图书简介：...</p>
      </div>
    </div>
  </div>
  <div class="col-4">
    <!-- 右侧功能区域 -->
  </div>
</div>

如果想让Card在col-8列内的间距更贴合响应式布局，也可以给col-8添加内边距类：

<div class="row">
  <!-- 给列添加p-3内边距，Card自然获得左右上下间距 -->
  <div class="col-8 p-3">
    <div class="card">
      <div class="card-body">
        <!-- 图书详情内容 -->
      </div>
    </div>
  </div>
  <div class="col-4">
    <!-- 右侧内容 -->
  </div>
</div>

方案2：自定义CSS实现灵活间距 #

如果原生工具类满足不了你的定制需求，可添加少量自定义样式：

.card-space {
  margin: 1.5rem 1rem; /* 上下1.5rem、左右1rem的外边距 */
}

然后给Card绑定这个类：

<div class="card card-space">
  <!-- 图书详情内容 -->
</div>

注意点 #

• Bootstrap 4的row默认带有负margin，别直接给row加padding，避免布局错位
• 优先使用原生工具类，既能保持代码风格统一，也能更好适配响应式场景

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