如何在Bootstrap 4图书详情卡片中设置左侧与顶部边距？

问题分析 #

你的CSS代码存在两个关键问题：

• padding: 4em, 1em; 语法错误，CSS中属性值需用空格分隔，而非逗号
• 样式仅作用在父容器#book_card上，未精准覆盖到目标图书卡片；同时col-8与col-4的顶部边距未统一

修正后的代码实现 #

1. 调整HTML结构（统一列的顶部边距）

给col-8添加和col-4一致的my-5类（Bootstrap内置的垂直边距类，对应margin-top: 3rem; margin-bottom: 3rem;），同时给卡片新增自定义类方便单独控制边距：

<div id="book_card" class="row">
  <!-- 给col-8添加my-5，和col-4保持顶部边距一致 -->
  <div class="col-8 my-5">
    <!-- 新增自定义类book-detail-card，用于单独设置卡片边距 -->
    <div class="card book-detail-card" style="width: 50rem;">
     <img class="card-img-top" src="..." alt="Card image cap">
     <div class="card-body">
       <h5 class="card-title">{{book.title}}</h5>
       <p class="card-text">
        Eshte nje roman i mrekullueshem ne kufijte e misterit. Si
       per te rritur dhe per femije. Lexojeni me mendje te qarte
         dhe te bukur qe te mbeteni te kenaqur.
       </p>
      </div>
       <ul class="list-group list-group-flush">
        <li class="list-group-item">Price: {{book.price}}</li>
        <li class="list-group-item">Is read: {{book.is_read}}</li>
        <li class="list-group-item">Page num: </li>
      </ul>
      <div class="card-body">
        <a href="#" class="card-link">Analyze</a>
        <a href="{% url 'book_borrow' book.pk %}" class="card-link">Borrow</a>
      </div>
    </div>
      {% if not book.is_read %}

     <form method="post"> {% csrf_token %}
      <button type="submit" name="is_read" class="btn btn-primary">Mark as read</button>
     </form>

     {% endif %}
   </div>

  <div class="col-4 mx-auto my-5">
    this is the column col-4 after col-8
  </div>

</div>

2. 修正并优化CSS代码

修复语法错误，同时针对自定义卡片类设置目标边距：

#book_card {
  /* 修正padding的语法错误，用空格分隔值 */
  padding: 4em 1em;
}

/* 给图书卡片设置左侧和顶部边距 */
.book-detail-card {
  margin-top: 1em;
  margin-left: 1em;
  /* 如需右侧边距可添加：margin-right: 1em; */
}

额外说明 #

• Bootstrap内置类（如my-*、mt-*）优先级高于自定义CSS，用内置类统一列边距更符合框架设计规范
• 若需更精细的顶部边距控制，可将my-5替换为mt-*类（仅控制顶部），比如mt-4对应margin-top: 1.5rem;

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