html - 如何使用引导程序将导航栏中的图标居中
问题描述
我正在尝试使用左侧的汉堡包和居中的图标创建导航栏。我怎样才能响应式地做到这一点?
- 我尝试使用 mx-auto (margin-left margin-right: auto) 但由于左侧有一个内联块,因此居中的图标被推到左侧。
- 我也尝试过制作导航栏 d-flex 并添加 justify-content-center 但它什么也没做......
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="pos-f-t">
<nav id="navbar" class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark d-flex flex-row">
<button class="navbar-toggler d-flex justify-content-start" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<img src="https://picsum.photos/20" alt="apple icon" class="d-flex justify-content-center mx-auto" id="icon">
</nav>
</div>
预期结果: - 汉堡保持在左侧,但苹果图标保持在中心。
实际结果: - 苹果图标被汉堡稍微向右推, - 或者根本没有改变,只是坐在右侧。
解决方案
推荐阅读
- while-loop - csh 行等待文件中的文本行
- mongodb - Mongodb选择大于日期的文档
- qnamaker - QnAMaker 可以自动刷新它注入的 URL 内容吗
- excel - Excel VBA - 声明为整数的变量不保存整数值(运行时错误 1004)
- javascript - 如何使用数据组并在柱形图中显示结果?可能吗?
- python - 使用 Blender Python API 拍摄整个模型的图像
- c++ - 如何在 BFS (C++) 期间删除队列中的 obj?
- mysql - 从除最后一个 newsid 之外的所有类别中选择 5 个 newssid
- spring - 无法在 Kubernetes 中的一个 pod 内的容器之间连接
- django - 地理定位字段是必需的