html - 图标栏汉堡不工作,只显示一条水平线
问题描述
我正在尝试创建一个响应式布局按钮,如下所示:
但问题是我无法创建三条水平线,只能创建其中一条。保持这种方式:
我的代码:
HTML
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
CSS
.navbar-toggler {
position: relative;
float: right;
width: 40px;
height: 40px;
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
z-index: 99999;
}
.navbar-toggler span {
height: 4px;
background: #545454;
transition: 0.2s all;
}
.navbar-toggler span:before, .navbar-toggler span:after {
content: "";
display: block;
}
解决方案
您可以将 HTML unicode☰
用于汉堡包图标
您可以在此处找到更多信息:https ://www.w3schools.com/charsets/ref_utf_symbols.asp
.navbar-toggle
{
font-size:25px;
background:none;
border:none;
}
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">☰
</button>
您还可以为图标设置动画,请参见:https ://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js
推荐阅读
- drupal - 在 Drupal 行为中触发调用无限次
- assembly - 在 32 位 MASM 中声明变量的技术机制和操作是什么?
- python - 如何使用数据框(熊猫)给出 3D 矩阵维度的名称
- r - foreach 并行化处理多个错误
- jackson - Jackson 在 API 响应中返回带有关键字“entry”、“key”和“value”的 JSON hashmap
- javascript - Firebase 动态链接 Rest API:未知名称“socialMetaTagInfo”
- python - 是否可以在不使用 numpy 的情况下在 Python 中编写这两个函数?
- c - C 中的舍入问题(32 位)
- yolo - 如何在 YOLO V1 中定义边界框标签?
- r - 如何使用 Shiny 和 Leaflet 将 hideGroup 制作成 showGroup