图标按钮的宽度应该和右边的动态表格一样,但是它们稍微有点溢出。Aproximed desired result/Current output.在粘贴代码块之前,我已经尝试过以下几个步骤:
- 将填充、底部填充、行内填充、边距、行内边距设置为0px,甚至将边距设置为负值。
- 减小行高、高度、最大高度或将其设置为适合内容/无。
- 删除HTML中按钮和图标之间的格式空格,使它们都在同一行代码中。
- 使用 Bootstrap 中的py-0、px-0和pz-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类并手动减小按钮大小。
一个二个一个一个
2条答案
按热度按时间f0ofjuux1#
Bootstrap首先被设计成移动的的,所以要使东西垂直对齐可能会很棘手。你可能需要考虑使用flex类
oyxsuwqo2#
使用位置:相对的,然后你可以移动它