Bootstrap列布局中图标按钮间距无法缩小、轻微溢出如何解决？

我希望列内的图标按钮总高度与右侧动态表格高度匹配，但目前按钮组出现轻微溢出问题。

已尝试的调整操作 #

• 将padding、padding-bottom、padding-inline、margin、margin-inline设置为0px，甚至为margin设置负值
• 调小line-height、height、max-height，或将其设置为fit-content/none
• 删除HTML中buttons与icons之间的格式化空格，将相关代码写在同一行
• 使用Bootstrap内置的py-0、px-0、pz-0类
• 设置display:flex、align-items:space-between，添加flex-direction: column属性

原始代码 #

CSS #

.actions-column {
  padding: 0px;
}

.values-column {
  padding-right: 0px;
}

HTML #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-11 values-column">
    <div class="row-lg containerRating list-group" id="userActCourses"></div>
  </div>
  <div class="col-md-1 actions-column">
    <button type="button" class="btn btn-default btn-floating btn-pure">
                                          <i id="addActIcon" data-index=-1 class="fa fa-plus action-icon add" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default btn-floating btn-pure" disabled>
                                          <i class="fa fa-pencil action-icon edit" aria-hidden="true"></i>
     </button>
    <button type="button" class="btn btn-default btn-floating btn-pure" disabled>
                                          <i class="fa fa-trash action-icon delete" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default btn-floating btn-pure" disabled>
                                          <i id="addCompleteIcon" class="fa fa-check-square-o action-icon complete" aria-hidden="true"></i>
    </button>
  </div>
</div>

最终修复方案 #

通过添加自定义CSS类手动缩小按钮高度解决了溢出问题，修改后代码如下：

调整后CSS #

.actions-column {
  padding: 0px;
}

.values-column {
  padding-right: 0px;
}

.customButton{
height:3rem;  /*低于Bootstrap默认按钮尺寸*/
}

调整后HTML #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-11 values-column">
    <div class="row-lg containerRating list-group" id="userActCourses"></div>
  </div>
  <div class="col-md-1 actions-column">
    <button type="button" class="btn btn-default btn-floating btn-pure customButton"> <!--修改点-->
                                          <i id="addActIcon" data-index=-1 class="fa fa-plus action-icon add" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default btn-floating btn-pure customButton" disabled><!--修改点-->
                                          <i class="fa fa-pencil action-icon edit" aria-hidden="true"></i>
     </button>
    <button type="button" class="btn btn-default btn-floating btn-pure customButton" disabled><!--修改点-->
                                          <i class="fa fa-trash action-icon delete" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default btn-floating btn-pure customButton" disabled><!--修改点-->
                                          <i id="addCompleteIcon" class="fa fa-check-square-o action-icon complete" aria-hidden="true"></i>
    </button>
  </div>
</div>

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