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

9rygscc1  于 2022-12-20  发布在  Bootstrap
关注(0)|答案(2)|浏览(165)

图标按钮的宽度应该和右边的动态表格一样,但是它们稍微有点溢出。Aproximed desired result/Current output.在粘贴代码块之前,我已经尝试过以下几个步骤:

  • 填充底部填充行内填充边距行内边距设置为0px,甚至将边距设置为负值。
  • 减小行高高度最大高度或将其设置为适合内容/
  • 删除HTML中按钮图标之间的格式空格,使它们都在同一行代码中。
  • 使用 Bootstrap 中的py-0px-0pz-0
  • 使用display:flex,align-items:space-between,添加flex-direction:色谱柱

这就是我的代码:

.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类并手动减小按钮大小。
一个二个一个一个

f0ofjuux

f0ofjuux1#

Bootstrap首先被设计成移动的的,所以要使东西垂直对齐可能会很棘手。你可能需要考虑使用flex类

oyxsuwqo

oyxsuwqo2#

使用位置:相对的,然后你可以移动它

相关问题