无法减少列中图标按钮之间的填充（Bootstrap、HTML 和 CSS）

Question

图标按钮应该覆盖与右侧动态 table 相同的宽度，但它们会稍微溢出。 Aproximed desired result/ Current output。在粘贴代码块之前，这里有一些我已经尝试过的东西：

设置padding,padding-bottom,padding-inline,margin,margin-inline 到 0px ，甚至边距的负值。
减少 line-height , height,max-height 或将其设置为 适合内容/none.
正在删除按钮和 HTML 中的图标之间的格式 space，因此它们都在同一行代码。
使用py-0、px-0和pz-0class 来自 Bootstrap
使用 display:flex , align-items:space-between, 添加 flex-direction: column

也就是说，这是我的代码：

.actions-column {
  padding: 0px;
}

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

<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 class 并手动减小按钮大小。

.actions-column {
  padding: 0px;
}

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

.customButton{
height:3rem;  /*Lower than the default size in bootstrap*/
}

<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"> <!-HERE!!!->
                                          <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><!-HERE!!!->
                                          <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><!-HERE!!!->
                                          <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><!-HERE!!!->
                                          <i id="addCompleteIcon" class="fa fa-check-square-o action-icon complete" aria-hidden="true"></i>
    </button>
  </div>
</div>

Answer 1

Bootstrap 设计为移动优先，因此让内容垂直对齐可能很棘手。您可能想研究使用 flex 类

无法减少列中图标按钮之间的填充（Bootstrap、HTML 和 CSS）

Can't reduce padding between icon buttons in a column(Bootstrap, HTML & CSS)

html

javascript

css

bootstrap-4

更新