html - Bootstrap 4:卡片标题中的图标
问题描述
我试图在卡片标题的右侧放置一个图标,但我正在努力做到这一点。
这是我的代码:
.btn {
display: inline-block;
}
.fa-pen {
float: right;
display: inline-block;
font-size: 0.75rem;
}
<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>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
<a class="modificationUtilisateur" href="https://www.google.fr/" id="">
<i class="fas fa-pen fa-pen-indicateur" title="Modifier"></i>
</a>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
你知道为什么我的图标在我的右上角,<h2>
而不是和我的按钮在同一行吗?
解决方案
Flex 也可以这样做:
h2.mb-0 {
display: flex;
justify-content: space-between;
align-items: center;
}
推荐阅读
- git - 使用 Git 恢复一些旧文件的副本,同时保留其最新版本
- docker-compose - 我可以在不删除旧容器的情况下使用 docker-compose up 重新创建 Docker 容器吗?
- python - 使用 pd.ExcelFile().parse() 从读取中排除列
- html - 如何覆盖表的默认css
- javascript - 使用 Wikipedia 的 opensearch api 时,主题标签符号不会填充数据列表。为什么?
- r - 即使在升级服务器实例后也无法分配大小为 xxx 的向量
- javascript - 登录后如何在php中为欢迎消息制作过渡效果?
- go - 如何不舍入持续时间
- java - 在具体类中,我的 ObjectOutputStream 不起作用,没有显示正确的结果
- postgresql - Postgresql 外来数据包装器