无法减少列中图标按钮之间的填充(Bootstrap，HTML 和 CSS)

Question

图标按钮应该覆盖与右侧动态表相同的宽度，但它们会稍微溢出。接近期望的结果电流输出。在粘贴代码块之前，以下是我已经尝试过的一些事情:

<<ul>

设置strong>填充,padding-bottom,padding-inline利润率,,margin-inline

减少行高高度,,max-height或者将其设置为fit-content/。

删除按钮之间的格式空格图标和所以它们都在同一行代码上。

使用<<li> strong> py-0 ,px-0和pz-0class from 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类并手动减小按钮大小。

.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类

Answer 2

使用position: relative;然后你可以移动它;